javascript - PDFKit - Custom Fonts - fs.readFileSync is not a function

Question

I'm using PDFKit for an application. I'm just using it in the Browser in an HTML file, with Javascript (no Node.js).

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

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

I'm trying to include a custom font per the documentation like so:

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'm not using that. However, the example in the docs say this can be used in the browser.

I know there's also a Browserify option, but I'm not sure how or if that would help in this situation

Answer 1

You have to use an 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);