How to enable UTF-8 in jsPDF library

Question

I am very happy to use jsPDF library which helps me to export my HTML page as PDF file. I came across some difficulties. I downloaded the library from http://parall.ax/produ

Answer 1

jsPDF still does not support UTF-8. Though it seems pdfmake.org supports UTF-8. Try using their playground and test it with your own characters.

Answer 2

As of 2015, jsPDF doesn't support UTF-8 properly, workaround is to use html2canvas to render jpg or png and to add it to pdf. You can use following snippet to get an idea:

var doc = new jsPDF();

var utf_8_string_to_render = 'any_value_you_want';

Promise.all(
[
    new Promise(function (resolve) 
    {
        var temp = document.createElement("div");
        temp.id = "temp";
        temp.style = "color: black;margin:0px;font-size:20px;";
        phrase = utf_8_string_to_render;
        temp.innerHTML= phrase;
        //need to render element, otherwise it won't be displayed
        document.body.appendChild(temp);

        html2canvas($("#temp"), {
        onrendered: function(canvas) {

                $("#temp").remove();
            resolve(canvas.toDataURL('image/png'));
        },
        });
    })
]).then(function (ru_text) { 

    doc.addImage(ru_text[0], 'JPEG', 0,0);
    doc.text(0, 10, 'Non-utf-8-string' );

    doc.save('filename.pdf');
    });


};

Another libraries that do support utf-8 coding are:

• PDFKit, which is reported to allow you to proper place your texts with coordinates.
• PDFMake, which renders UTF-8 characters properly, but doesn't allow you to position text, except for styling it with margins.

Answer 3

I have the answer after one day of searching throw all sites.

toPDF(): void {
    const AmiriRegular = 'AAEAAAASAQAABAAgRFNJR2D2zXQA.....A';

    const doc = new jsPDF({ filters: ["ASCIIHexEncode"] });

    doc.addFileToVFS("Amiri-Regular.ttf", AmiriRegular);
    doc.addFont("Amiri-Regular.ttf", "Amiri", "normal");

    doc.setFont("Amiri"); // set font
    doc.setFontSize(10);

    doc.text(10,10,'אוהב אותך'.split('').reverse().join(''));
       this.CAccounts.forEach(function (AccountsBody, i) {
      doc.text(20, 20 + (i * 10),


        "ID: " + AccountsBody.ID +
        "NAME: " + AccountsBody.NAME.split('').reverse().join(''));
    });
    doc.save('employee.pdf');

  }

Answer 4

jsPDF doesn't support UTF-8 Though the following plugin do make it possible as it integrates full custom font support when you can convert your file(FONT File) to BASE64.I have converted Arial Unicode to base64 and used it though it creates some spacing and alignment issues that you need to deal with by debugging into the code.

https://github.com/sphilee/jsPDF-CustomFonts-support