"fs is not defined" in the prebuild version

[kelvin200]

Hi, I don't use NodeJS so I use the prebuild version of PDFKit to generate the PDF.
I imported the library in the HTML file
`<script src="Scripts/blob-stream.js" type="text/javascript"></script>

<script src="Scripts/pdfkit.js" type="text/javascript"></script>`

It worked well with built-in fonts.
When I registered a font from a file and used it
doc.registerFont('OpenSans-Regular', 'fonts/OpenSans-Regular.ttf', 'OpenSans-Regular'); doc.font('OpenSans-Regular');
I got this error
Uncaught ReferenceError: fs is not defined at Object.fontkit.openSync (pdfkit.js:16213) at Function.PDFFont.open (pdfkit.js:12888) at PDFDocument.font (pdfkit.js:14673)
Can anyone please guide me how to solve this problem?
Thanks!

[Blewin]

Hey!
To use embedded fonts in browser context, I needed to download it other way through http, and pass it to the pdfkit.

I don't know what fancy framework are you using, but in angular, I did it like this:

$http.get('assets/fonts/LatoLatin/fonts/LatoLatin-Light.ttf', {responseType: "arraybuffer"})
  .then(function(response){ /*..*/ 
                   resultDocument.registerFont('Lato', font.data);
                  /*..*/
})

[kelvin200]

Hi,
I did load the font files but the issue is still there.
I'm using Typescript + Jquery so I do this to load the file

$.when($.get("fonts/Open_Sans/OpenSans-Regular.ttf"))
           .then(function () {
                  doc.registerFont('OpenSans-Regular', 'fonts/OpenSans-Regular.ttf');
                  doc.font('OpenSans-Regular');
                  // ...
});

I think the problem is that my system can't understand the 'fs' Node package. For some reason, that package was not integrated to the prebuild file.

[Blewin]

You did load the font files, but you did not point pdfkit to them.

Try

$.when($.get("fonts/Open_Sans/OpenSans-Regular.ttf"))
           .then(function (fontData) {
                  doc.registerFont('OpenSans-Regular', fontData);
                  doc.font('OpenSans-Regular');
                  // ...
});

or something like that (maybe fontData.data?)

[kelvin200]

Hi,
You are right, I didn't load the font data correclty.
Here's the code for those who need it (jQuery doesn't support binary datatype on ajax call)

var xhr = new XMLHttpRequest();
xhr.open('GET', font.url, true);
xhr.responseType = 'arraybuffer';

xhr.onload = function (e) {
  if (this.status == 200) {
    doc.registerFont(font.name, xhr.response);
    // Do something...
  }
};

xhr.send();

[ninbit]

@nguoihocnghe, I have the same problem. Where and how do you define font variable? Also, since I am getting the font file from local, I get CORS policy error.

[kelvin200]

@ninbit It has been a long time since I worked with that project so I can't remember. However, I guess font is just my local object to define font name and url. You can define it the way you like, just make sure that you can pass it to the above function to load it and render your text.

You get CORS error because you dev site and your font are not on the same domain, I guess. I used localhost for my dev site so I had no problem with it.

It's not relevant to this topic though but I'm willing to help.

[tejash-jl]

To load a font that is present in your source code or locally, you can use the below code,

const path = path.join(__dirname, '..', '..', 'fonts', 'Zilla Slab', 'ZillaSlab-Regular.ttf');
doc.registerFont('Zilla Slab', path);