Firefox pdf download using html2pdf.js causing text overlapping issue [duplicate]

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.



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




Continue reading...