Adding a utf-8 font to jsPDF library to print utf-8 Arabic pdfs in Angular application

8
votes

I have been searching for hours to enable the UTF-8 support in jsPDF library, since it is a new feature released in jsPDF 1.4 I can't find useful resources to enable it

I found two methods in the library addFont() & setFont() but it is not clear in the official docs how to use them to use the new font & if they depend on each other

I am specifically trying to add a font that supports Arabic, like for example (Roboto) or any basic font that support Arabic

The code that I am using (& works well with English html but not Arabic):

printAsPDF() {
    const elementToPrint = document.getElementById('report'); // The html element to become a pdf
    const pdf = new jsPDF();
    pdf.setFont('Helvetica');
    console.log(pdf.getFontList());

    pdf.fromHTML(elementToPrint, 30, 30);

    pdf.save('hello.pdf');
}

The fonts that are supported by default:(output of getFontList()):

Courier
Helvetica
Symbol
Times
ZapfDingbats
courier
helvetica
symbol
times
zapfdingbats
3
javascripttypescriptjspdfangular6

3 Answers

5
votes

first the bad news: fromHTML is deprecated so try not to use it.

you can use it by setting an arabic font and decoding it to Base64 like this:

const AmiriRegular = environment.AmiriRegular.trim();

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

doc.setFont('Amiri'); // set font
doc.setFontSize(20);

doc.text('مرحبا', 200, 10, { align: 'right', lang: 'ar' });

// Save the PDF
doc.save('Test.pdf');

the AmiriRegular const here is the base64 value for the amiri font and you can decode fonts here:

fonts decoder

good news: you can use html2pdf instead by running the command

=> npm install html2pdf

then calling the html2pdf function with or without setting the options for the page, then saving the file by calling save function here is an example:

const content = `<h1>صلي علي سيدنا محمد صلي الله عليه وسلم</h1>`;

const opt = {
      margin: 1,
      filename: 'Test.pdf',
      image: { type: 'jpeg', quality: 1 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };

    // Save the PDF
    html2pdf().set(opt).from(content).save();

but remember that html2pdf is generating an image for the html content not like fromhtml function

0
votes

It's because jspdf don't support utf-8. It claims it is, but that theoretically works(doesn't work for me) only for text() method and not for addHtml() or fromHtml(), so in my opinion it's a joke.

text() method is not an option even for just text. In case of larger amount of text it goes off screen instead of creating another page. Theoretically you could use splitTextToSize to split text into array, count lines and add another page when it's full... but if your case allows, use html2canvas - make an image and use jspdf addImage() then you don't have to worry about encoding and fonts.

And my last advice. If you can, don't use jspdf.

0
votes

before set font you must be add font support utf8

printAsPDF() {
  const elementToPrint = document.getElementById('report'); 
  const pdf = new jsPDF();
  pdf.addFont('/assets/fonts/ArabicFont.ttf', 'ArabicFont', 'normal');
  pdf.setFont('ArabicFont');
  pdf.fromHTML(elementToPrint, 30, 30);
  pdf.save('hello.pdf');

}