PDFMake: Can't display chinese fonts

Question

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:

Downloaded the SC (and TC) fonts from the google fonts page
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).
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
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: 简体中文体中文

score 1 · Answer 1 · answered Sep 30 '20 at 12:38

Not sure if you've solve your problem yet. I had the same issue before and I finally solved the problem after trying out many solutions posted online: So what you have been doing is correct and will work, as long as you include your custom font as the new default font style in your document definition. I have included my test html code below for your reference.

Note: The custom font file doesn't have to be in .ttf format. I'm using Noto Sans SC from Google Fonts and the .otf files work just fine. (I'm using pdfmake v0.1.68).

<!DOCTYPE html>
<html>
<head>
  <title>PDFMake with Chinese Font</title>
  <meta charset='utf-8'>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
  <script src="vfs_fonts.js"></script>
</head>
<body>
  <div id="test">尝试加入简体中文</div>
<script>
  pdfMake.fonts = {
    NotoSansSC: {
      normal: 'NotoSansSC-Regular.otf',
      bold: 'NotoSansSC-Bold.otf',
    }
  };
  var docDefinition = {
    content: document.getElementById('test').innerHTML,
    defaultStyle: {
      font: 'NotoSansSC'
    }
  }
  pdfMake.createPdf(docDefinition).download();
</script>
</body>
</html>

Hello. Thank you for your answer, just a question. How large is the vfs_fonts.js file, since mine by using the .otf file is like 20Mb in size with SC Regular and Bold in it. — Artyomska, Oct 01 '20 at 15:37
Mine is about 23MB, I have Noto Sans SC Regular and Bold (otf files), and Noto Sans (not SC) Regular and Bold (ttf files) so I have a total of 4 font files. The Noto Sans SC somehow doesn't work well with English words in pdfmake tables, so I have to use both. — SyenLxyz, Oct 02 '20 at 17:01

score 0 · Accepted Answer · answered Aug 05 '20 at 13:05

0

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

answered Aug 05 '20 at 13:05

Artyomska

1,309
5
26
53

Thanks for this thread. What did you do to solve it? Install pdfkit-next, or did you find another library that works? – Pannkakan Sep 23 '20 at 12:06
1

@Pannkakan Hello. To fix it I didn't use NOTO anymore, since I couldn't find a way to add pdfkit-next instead of pdfkit to the pdfmake dependencies. So until an actual update is made for pdfmake, I just converted to base64 a chinese font which has like 6.5MB in size, made a vfs_font.js and used it. It worked, but it bloated the size of the application by the size mentioned above. – Artyomska Sep 24 '20 at 06:43
It is not about pdfkit but about pdfmake – Srini Karthikeyan Jun 11 '21 at 09:01

PDFMake: Can't display chinese fonts

2 Answers2