PDFKit - Custom fonts - fs.readFileSync is not a function

Question

I am using PDFKit for the application. I just use it in a browser in an HTML file, with Javascript (no Node.js).

I downloaded PDFKit from GitHub: https://github.com/devongovett/pdfkit/releases

as well as the Blob stream: https://github.com/devongovett/blob-stream

I am trying to include my own font in the documentation as follows:

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

But I always get this error:

  fs.readFileSync is not a function 

This makes sense because fs.readFileSync is part of Node.js, and I do not use it. However, the example in the docs says that this can be used in a browser.

I know there is a Browserify option, but I'm not sure how or if this helps in this situation

Answer 1

It seems you should use Browserify for this function and that using the precompiled PDFKit.js will not cut it for any of the Node.js functions.

Answer 2

You should use 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); 

Answer 3

I also ran into this problem, and Andrea's answer is only part of the solution. You really need to configure the pdfkit.js file. But first you need to do what Andrea did:

 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); 

As I said, you need to configure the pdfkit.js file. Roughly on line 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; } } } 

Make sure you also enable blob-stream.js. I added an extra parameter after // START NEW, which takes care of the array buffers that come from XMLHttpRequests.

I don't know if this is the best solution, but it works.

Answer 4

Here are the steps I followed to download a custom unicode font.

1. Create package.json using the default values:

npm init -y

2. Install fontkit

npm install fontkit

3. Install the browser globally (in case you don’t have a browser)

npm install -g to browser

4. Create an empty file and name it compile.js (or whatever)

5. Paste the following code inside the compile.js file

    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"); }); }); 

   To load a different font, simply change the fontName value. The above code assumes that a font file named OpenSans-Regular.ttf is present in the same directory as compile.js. You can change fontPath to any path or URL that you like.

6. Run the following (in your terminal or command line) to create a custom version of fontkit.

browserify compile.js -o fontkit.js

7. You can delete the compile.js file. This is no longer needed. You can also remove the node_modules directory as well as package.json. (If you do not use other packages, and you only do this to create a custom version of fontkit)

8. Create an index.html file and paste the following:

    <!DOCTYPE html> <html lang="en"> <head> <title>Custom Font</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <iframe id="frame1" width="100%" height="500px"></iframe> </body> <script src="pdfkit.js"></script> <script src="blob-stream.js"></script> <script src="fontkit.js"></script> </html> 

9. Here is a screenshot of index.html in the browser: