9

I want to generate a pdf file using JavaScript at client side . Firstly I tried using jsPdf API . But it does not work with Unicode character like Chinese.

Is there any option to enhance jspdf to support Unicode or any other library which supports Unicode .

Pdfmake API says it supports Unicode but when I tried it also does not work out, I checked in there demo example placing Unicode character .

I tried using pdfkit in Node.js but pdf is not getting created properly

var PDFDocument = require("pdfkit");
var fs = require('fs');

var doc = new PDFDocument;

doc.pipe(fs.createWriteStream('output.pdf'));

doc.fontSize(15);
doc.text('Generate PDF! 漢字漢字漢字漢字');

doc.end();

In pdf it created as Generate PDF! o"[Wo"[Wo"[Wo"[W

Also , Can I add multiple font in pdfMake

 var fontDescriptors = {
    Roboto: {
      normal: 'examples/fonts/Roboto-Regular.ttf',
      bold: 'examples/fonts/Roboto-Medium.ttf',
      italics: 'examples/fonts/Roboto-Italic.ttf',
      bolditalics: 'examples/fonts/Roboto-Italic.ttf'
    }
  };

  var printer = new pdfMakePrinter(fontDescriptors);
Sumeet Kumar Yadav
  • 11,912
  • 6
  • 43
  • 80
  • `Is there any option to enhance jspdf to support Unicode or any other library which supports Unicode` of course there's a way - https://github.com/MrRio/jsPDF#contributing . Its opensourced so you can contribute to it with that change – llamerr Jul 13 '16 at 13:10
  • have you tried to check for issues regarding this on either of projects and create one if there is none? – llamerr Jul 13 '16 at 13:11
  • I have not tried to create any new library , but trying to find if any library already exist to solve my problem .@llamerr – Sumeet Kumar Yadav Jul 13 '16 at 13:17

1 Answers1

9

I'll describe a solution using Node.js and PDFKit since you mentioned it but it also applies to pdfmake which internally uses PDFKit.

Most of the time, the default font used in these libraries do not accept Chinese characters. You have to add and use fonts that are compatible for the languages you need to support. If we take pdfmake for example, they use Roboto as their default font and it indeed does not accept Chinese characters.

Using your code example, we can add support for Chinese using the Microsoft YaHei font (msyh.ttf) for instance with only 1 additional line of code:

var PDFDocument = require("pdfkit");
var fs = require('fs');

var doc = new PDFDocument;

doc.pipe(fs.createWriteStream('output.pdf'));

doc.font('fonts/msyh.ttf');
doc.fontSize(15);
doc.text('Generate PDF! 漢字漢字漢字漢字');

doc.end();

The output would look like this:

PDF Output

HiDeoo
  • 10,353
  • 8
  • 47
  • 47
  • Is it necessary to font for every different Unicode type , I just tried with Hindi Language , It requires another font . Is there any way to support all fonts or support multiple font in one ? @HiDeo – Sumeet Kumar Yadav Jul 19 '16 at 05:23
  • The built-ins fonts support only the WinANSI encoding so you indeed need to add fonts. The trick is you can add multiples fonts or even subsets of fonts. Since most fonts only covers a subset of the over 100 000 scripts and symbol sets of UTF-8, you need to identify exactly what you need and find 1 or multiple fonts covering your needs. – HiDeoo Jul 19 '16 at 07:59
  • I want to support for Chinese / German / French / English / Arabic /Latin from where I can download /get fonts ?@HiDeo – Sumeet Kumar Yadav Jul 19 '16 at 08:17
  • Well, I took a random font supporting Chinese in a Google search for fonts supporting Chinese in the example ^^ You'll have to check if you can find a font supporting all your needs, if not, that should be another question since it's out of the scope of the original question. You should also check [Google Noto Fonts](https://www.google.com/get/noto/) which is a font family aiming to support all languages, you can pick exactly what you need in this font. – HiDeoo Jul 19 '16 at 08:33
  • I accept your solution , you deserve to be ! Just looking for some better solution – Sumeet Kumar Yadav Jul 19 '16 at 08:35
  • Can I add multiple font in pdfMake , I am trying to add noto-fonts and noto-ckj fonts together ? – Sumeet Kumar Yadav Jul 19 '16 at 09:13
  • Yes, if you check the documentation for pdfmake on [how to use custom fonts](https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts---client-side), when you create your new `vfs_fonts.js` it'll contain all files / fonts from `examples/fonts` so you can add them here as specified. – HiDeoo Jul 19 '16 at 09:30
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/117688/discussion-between-sumeet-and-hideo). – Sumeet Kumar Yadav Jul 19 '16 at 10:51
  • I migrated to natosans within the following font collection https://www.google.com/get/noto/ – basti500 Jun 22 '21 at 12:19
  • Hey guys, Did you find any solution to add noto-font and noto-ckj together ? – Abhishek May 09 '22 at 10:13