PDFKit – Fuentes personalizadas – fs.readFileSync no es una function

Estoy usando PDFKit para una aplicación. Solo lo estoy usando en el browser en un file HTML, con Javascript (no Node.js).

Descargué PDFKit de GitHub: https://github.com/devongovett/pdfkit/releases

así como Blob Stream: https://github.com/devongovett/blob-stream

Estoy tratando de include una fuente personalizada según la documentation, así:

doc.registerFont('Custom Font', 'fonts/GOODDP__.TTF'); doc.font('Custom Font').fontSize(fontSize).text($("#text1").val(), xPos, yPos, configObj); 

Pero siempre obtengo este error:

  fs.readFileSync is not a function 

Esto tiene sentido porque fs.readFileSync es parte de node.js, y no estoy usando eso. Sin embargo, el ejemplo en los documentos dice que esto se puede usar en el browser.

Sé que también hay una opción Browserify, pero no estoy seguro de cómo o si eso ayudaría en esta situació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 debes usar Browserify para esta funcionalidad y que usar un PDFKit.js precomstackdo no lo cortará para ninguna de las funcionalidades específicas de Node.js.

También me encontré con este problema y la respuesta de Andrea es solo parte de la solución. Realmente necesita ajustar el file pdfkit.js. Pero primero debes hacer lo que hizo Andrea:

 var myImage; var oReq = new XMLHttpRequest(); oReq.open("GET", "myimage.jpg", true); oReq.responseType = "arraybuffer"; oReq.onload = function(oEvent) { myImage = oReq.response; //image as an arraybuffer makePDF(); }; oReq.send(null) //then use myImage like normal: doc.image(myImage); 

Como dije, necesitas modificar el file pdfkit.js. En la línea 2888:

 PDFImage.open = function(src, label) { var data, match; if (Buffer.isBuffer(src)) { data = src; } else { //START NEW if (src instanceof ArrayBuffer) { data = new Buffer(new Uint8Array(src), 'object'); } else //END NEW if (match = /^data:.+;base64,(.*)$/.exec(src)) { data = new Buffer(match[1], 'base64'); } else { data = fs.readFileSync(src); if (!data) { return; } } } 

Asegúrese de include también blob-stream.js. Agregué una opción extra después de // START NEW que se ocupa de los buffers de matriz que provienen de XMLHttpRequests.

No sé si esta es la mejor solución, pero funciona.