JavaScript pdf generation library with Unicode support

Question

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);

Thermosetting

Is there any option to enhance jspdf to support Unicode or any other library which supports Unicode of course there's a way - github.com/MrRio/jsPDF#contributing . Its opensourced so you can contribute to it with that change – Phonic

have you tried to check for issues regarding this on either of projects and create one if there is none? – Phonic

I have not tried to create any new library , but trying to find if any library already exist to solve my problem .@Phonic – Thermosetting

Answer 1

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:

Pentomic

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 – Thermosetting

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. – Pentomic

I want to support for Chinese / German / French / English / Arabic /Latin from where I can download /get fonts ?@HiDeo – Thermosetting

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 which is a font family aiming to support all languages, you can pick exactly what you need in this font. – Pentomic

I accept your solution , you deserve to be ! Just looking for some better solution – Thermosetting

Can I add multiple font in pdfMake , I am trying to add noto-fonts and noto-ckj fonts together ? – Thermosetting

Yes, if you check the documentation for pdfmake on how to use custom fonts, 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. – Pentomic

Let us continue this discussion in chat. – Thermosetting

I migrated to natosans within the following font collection google.com/get/noto – Filip

Hey guys, Did you find any solution to add noto-font and noto-ckj together ? – Homey