使用html2pdf.js在Firefox导出PDF时遇文本重叠问题求助

问题背景 #

使用html2pdf.js实现PDF下载功能，表单HTML页面导出PDF在Chrome中运行正常，但在Firefox浏览器出现文本重叠问题。

相关截图 #

• Firefox中文本重叠效果截图
• CORS错误提示截图

实现脚本代码 #

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();
  }
}

问题排查与解决过程 #

1. 初始解决文本重叠：通过设置letter-spacing: 3px;和word-spacing: 7px;曾解决Firefox文本重叠问题，但后续出现CORS错误：

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

html2canvas.js

2. 最终解决方案：改用内联样式设置字符间距和单词间距，避免跨域样式表访问问题，代码如下：

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';
});

内容的提问来源于stack exchange，提问作者Santosh