PDFKit – Fuentes personalizadas – fs.readFileSync no es una función

La guía o código que verás en este artículo es la solución más eficiente y válida que hallamos a esta inquietud o problema.

Solución:

Tienes que usar un ArrayBuffer:

        var oReq = new XMLHttpRequest();
        oReq.open("GET", "css/fonts/Open_Sans/OpenSans-Regular.ttf", true);
        oReq.responseType = "arraybuffer";

        oReq.onload = function(oEvent) 
            var arrayBuffer = oReq.response; // Note: not oReq.responseText

            if (arrayBuffer) 
                PdfExporter.doc.registerFont('OpenSans', arrayBuffer)
            
        ;

        oReq.send(null);

Parece que debe usar Browserify para esta funcionalidad y que usar un PDFKit.js precompilado no es suficiente para ninguna de las funciones específicas de Node.js.

Estos son los pasos que seguí para cargar una fuente Unicode personalizada.

1. Cree package.json usando los valores predeterminados:

npm inicializar -y

2. Instalar kit de fuentes

npm instalar fontkit

3. Instale browserify globalmente (en caso de que no tenga browserify)

npm install -g browserify

4. Cree un archivo vacío y asígnele el nombre compile.js (o lo que quiera)

5. Pegue el siguiente código dentro de compile.js

   fontkit = require("fontkit");
   const fontName = "OpenSans-Regular";
   const fontPath = fontName + ".ttf";
   
   fetch(fontPath)
       .then(res => res.arrayBuffer())
       .then(fontBlob => 
           const customFont = fontkit.create(new Buffer(fontBlob)).stream.buffer;
           const doc = new PDFDocument();
           const stream = doc.pipe(blobStream());
           doc.registerFont(fontName, customFont);
           doc.fontSize(14);
           doc.font(fontName)
           .fillColor("black")
               .text(
                   "Custom unicode font loaded. Ω is the 24th and last letter of the Greek alphabet.",
                   50,
                   50,
                    width: 800, align: "left" 
               );
           doc.end();
           stream.on("finish", function() 
               const blob = stream.toBlob("application/pdf");
               const iframe = document.querySelector("iframe");
               iframe.src = stream.toBlobURL("application/pdf");
           );
       );
   

   Para cargar una fuente diferente, simplemente cambie el valor de fontName. El código anterior asume que un archivo de fuente llamado OpenSans-Regular.ttf está presente en el mismo directorio que compile.js. Puede cambiar fontPath a cualquier ruta o URL que desee.

6. Ejecute lo siguiente (en su Terminal o símbolo del sistema) para crear una versión personalizada de fontkit.

browserify compilar.js -o fontkit.js

7. Puede eliminar el archivo compile.js. Ya no es necesario. También puede eliminar el directorio node_modules y package.json. (Si no está usando otros paquetes y solo está haciendo esto para crear una versión personalizada de fontkit)

8. Cree un archivo index.html y pegue lo siguiente:

9. Aquí hay una captura de pantalla de index.html en el navegador:

Recuerda mostrar este escrito si si solucionó tu problema.

---

---

Utiliza Nuestro Buscador