How can we add 'Arabic' Text in jsPDF?

Question

I am using jsPDF and i am stuck at putting the Arabic text in the file, if i put the arabic string its prints very odd english characters.

var doc = new jsPDF('p', 'pt');
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'حيدر'); //Arabic Text
doc.save('table.pdf');

Answer 1

jsPDF is supporting utf8 characters including Arabic.

On HTML include the jspdf library

in your html, define the font-family like bellow

<div id="page-ar" style="direction: rtl; width: 794px; height:1122px; margin: 0 auto; position: relative;display: flex;padding:20px; background-color: #E1F4FF; font-family: 'SF-Arabic', sans-serif;">
<h1 style="text-align: right; word-wrap: normal; margin: 0px 0px 10px;padding:0px 15px; font-size: 28px;">شهادة التوقيع</h1>          
            <div style="margin-bottom:40px;padding:0px 15px;font-size: 13px;"><span style="text-align: right; ">الرقم المرجعي: </span><span id="refNumeberAr"></span></div>
            <div class="signature-table-header" style="padding:5px 15px; display: flex; align-items: center;font-weight: bold;font-size: 13px;">
              <div style="text-align: right; width: 30%;"><!--Signer-->صاحب التوقيع</div>
              <div style="text-align: right; width: 35%;"><!--Timestamp-->البصمة الزمنية</div>
              <div style="text-align: right; width: 35%;"><!--Signature-->التوقيع</div>
            </div>
      </div>

now in your js file convert the DOM element into PDF. The library FS id available only available on node. you can use any file read and write operation for browser. Note: there's addFileToVFS, addFont and setFont API to set the user font.

function htmlToPdf(htmlContent) {
    return new Promise(async (resolve, reject) => {
        // Create a new jsPDF instance
        //Doc ref: https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html
        const jsPDF = jspdf.jsPDF;
        let doc = new jsPDF({
            orientation: 'portrait',
            unit: 'pt',
            format: 'a4',
            hotfixes : ['px_scaling'], //if unit is 'px' 
            putOnlyUsedFonts:true,
            floatPrecision: 16 // or "smart", default is 16
        });     

        // //Add font to document
        const fontBytes = fs.readFileSync('./fonts/PdfSignature/SF-Arabic-font.ttf');
        doc.addFileToVFS('SF-Arabic-font.ttf', fontBytes.toString("base64"));
        doc.addFont('SF-Arabic-font.ttf', 'SF-Arabic', 'normal');
        doc.setFont("SF-Arabic");
        doc.addFileToVFS('SFProDisplay-Regular.ttf', fs.readFileSync('./fonts/SFProDisplay-Regular.ttf').toString("base64"));
        doc.addFont('SFProDisplay-Regular.ttf', 'SFProDisplay', 'normal');
        doc.setFont("SFProDisplay");
        // // doc.setTextColor(0, 0, 0);
            
        // Convert HTML to PDF format and add it to the new page
        let margins = {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
            width: 794
        };

        doc.html(
            htmlContent, 
            {
                callback: function (_doc) {
                    try {
                        //_doc.save("edited.pdf", {returnPromise: false});  
                        //Ref: https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html#output
                        return resolve(Buffer.from(_doc.output("arraybuffer")));//"blob","dataurl","dataurlstring"
                    } catch (error) {
                        console.log(error);
                        return reject(error);
                    }                   
                },
                x:margins.left,
                y:margins.top,
                //margin : [margins.top, margins.right, margins.bottom, margins.left],
                //width: margins.width, // max width of content on PDF
                html2canvas : {
                    useCORS: true,
                    allowTaint: true,
                    scale: 72/96 //scaling for pt to px
                }
            }
        );
    }); 
    
}

For more information, please check https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html

Answer 2

As of now, jspdf doesnot support unicode characters. If you are okay with lower resolution of the pdf, you can try using html2canvas library along with jspdf, which is quiet easier approach.