angularfirefoxjspdfhtml2canvas

Firefox pdf download using html2pdf.js causing text overlapping issue

I am using html2pdf.js for downloading pdf. I have prepared an html of a form which I want to download as pdf. It works fine with chrome but with firefox I unable to understand why those text overlapped each other with only Firefox browser.

enter image description here enter image description here

My script.

downloadPdfFile(fileName, element, height, logo){
  if (this.isBrowser) {
    var doc = new jsPDF();
    doc.addFont("Lato-Regular.ttf", 'Lato', 'normal');
    doc.setFont('Lato');
    var fontSize = 16;
    doc.setFontSize(fontSize);
    const html2pdf = require('html2pdf.js');
    const opt = {
      margin: [22, 6, 6, 6],
      filename: `${fileName}.pdf`,
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: {
        letterRendering: true,
        scale: 1,
        logging: true,
        allowTaint: true,
        useCORS: true,
        taintTest: true,
        dpi: 192
      },

      jsPDF: { unit: 'mm', format: 'letter', orientation: 'portrait', font: 'Lato' },
      autoPaging: 'text',
      pagebreak: { mode: ['avoid-all', 'css', 'legacy'] },
    };
    this.downloadPdf = false;
    html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) {
      var totalPages = pdf.internal.getNumberOfPages();
      for (let i = 1; i <= totalPages; i++) {
        pdf.setPage(i);
        pdf.addImage(logo, "PNG", 5, 5, 0, 15);
      }
    }).save();
  }
}

I had this issue earlier too which I fixed using letter-spacing : 3px; and wordspacing: 7px. Now suddenly it start giving me cors error on firefox and download the pdf.\

@-moz-document url-prefix() {
    body * {
        word-spacing: 20px
    }
    .formio-editor-read-only-content, 
    .form-check-label
    .form-list-pdf-con .submitted-title {
        word-spacing: 20px
    }

   .form-list-pdf-con .col-form-label, 
   .form-list-pdf-con .card-title {
        word-spacing: 20px;
        letter-spacing: 3px;
      
    }
}

Error message

#1 12961ms Unable to access cssRules property DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet

html2canvas.js

enter image description here

Worked as @NarenMurali suggested to use inline style.

const ilnline = element.querySelectorAll('#element-to-print-1 .form-list-pdf-con .col-form-label');
    ilnline.forEach((node:any)=>{
      node.style.letterSpacing = '3px';
      node.style.wordSpacing = '3px';
    });
Solution

  • Also the styles are not being considered due to CORS, instead try adding them inline like style="word-spacing: 2px; letter-spacing: 1px" on the HTML element that gets processed.

    <div style="word-spacing: 2px; letter-spacing: 1px">
    ....
</div>