使用 html2pdf.js 下载 Firefox pdf 导致文本重叠问题

Question

我正在使用

html2pdf.js

下载 pdf。我已经准备好了一个 html 表格，我想将其下载为 pdf 格式。它在 Chrome 上运行良好，但在 Firefox 上运行良好，我无法理解为什么这些文本仅在 Firefox 浏览器中相互重叠。

我的剧本。

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

我之前也遇到过这个问题，我使用

letter-spacing : 3px; and wordspacing: 7px

修复了它。现在突然开始在 Firefox 上出现 cors 错误并下载 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;
      
    }
}

错误信息

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

html2canvas.js

Answer 1

有一个github问题建议使用

setCharSpace

方法来设置字符空间。

doc.setCharSpace(3);

JS PDF 文档 - setCharSpace