1

I am using jspdf.debug.js latest version. FontAwesome icons used in a web page are not rendering in pdf. I added a FontAwesome user icon in the page.Refer to the image.(Left one is HTML and pdf output is on right) Below is my code snippet.

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addFont('FontAwesome', 'FontAwesome', 'normal');
pdf.setFont('FontAwesome');
pdf.canvas.height = 72 * 11;
pdf.canvas.width = 72 * 8.5;
html2pdf(document.body, pdf, function(pdf){
    var iframe = document.createElement('iframe');
    iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
    document.body.appendChild(iframe);
    iframe.src = pdf.output('datauristring');
});

enter image description here

BalaajiChander
  • 139
  • 3
  • 21
Neeraj Bhatt
  • 111
  • 2
  • 10

2 Answers2

3

I did in this way and all works with font Awesome 5...

  1. Following this article i uploaded the fa-solid-900-normal.ttf at https://peckconsulting.s3.amazonaws.com/fontconverter/fontconverter.html

  2. I got the js file and import it.

  3. In Angular i did in this way

     constructor() {
 var callAddFont = function () {
     this.addFileToVFS('fa-solid-900-normal.ttf', jsPDFfonts.fontawesome5_fa_solid_900);
     this.addFont('fa-solid-900-normal.ttf', 'fa-solid-900', 'normal');
 };
 jsPDF.API.events.push(['addFonts', callAddFont])

    }

where jsPDFfonts.fontawesome5_fa_solid_900 is the content of the file

  1. Then during the print process for printing an icon i did in this way

         pdf.setFont('fa-solid-900', 'normal');
     pdf.setFontSize(10);
     pdf.text('\uf6f0', 15, 15*index);

i printed directly the unicode of the icon

Andrea Dompè
  • 139
  • 6
2

jspdf does not support special symbols. Here is the gitHub issue. See info in this answer.

Yevhenii Bahmutskyi
  • 1,561
  • 3
  • 20
  • 38