Search code examples
pdfmake

PDFMake: Can't display chinese fonts

In my PDF download, I need to have the possibility to use both english and chinese as languages for the inserted text, but while english works I cannot make chinese to work.

I followed the documentation from here, but no matter what fonts I try to use the newly added ones always display as empty boxes, more exactly something like this [][][][].

The steps I've took are the following ones:

  1. Downloaded the SC (and TC) fonts from the google fonts page

  2. Converted the Regular file of the font family from .otf to .ttf using online converters (multiple sites since I've thought maybe the convertor has a problem). This resulted in two aprox. 10kb files (one for TC and one for SC).

  3. Using the script.sh from the pdfmake documentation page, I've converted the .ttf fonts to a vfs_fonts.js, which successfully created an object that contains the font name as key and a base64 string as value

  4. Added the necessary code to my pdf exporting service after moving the vfs_fonts.js file in my assets folder

Yet the boxes are still empty. This is my service code, where pdfFonts.pdfMake.vfs references the newly created vfs file and defaultStyle of the docDefinition is set to font: "NotoCh".

pdfMake.vfs = pdfFonts.pdfMake.vfs;

pdfMake.fonts = {
  NotoCh: {
    normal: 'NotoSansSC-Regular.ttf',
    bold: 'NotoSansTC-Regular.ttf',
    italics: 'NotoSansSC-Regular.ttf',
    bolditalics: 'NotoSansTC-Regular.ttf',
  },
};

I used both SC and TC files because initially I thought I was using the wrong chinese characters, but it doesn't matter which ones I use, it still doesn't work, and I receive no error in the console or at compile time. What am I missing in here?

EDIT: These are the characters I am trying to display, as an example: 简体中文体中文

Solution

  • It looks like this is a bug related to Noto fonts present in the latest pdfkit version 0.11.0, which was seemingly fixed in pdfkit-next. Link to the bug