UI 使用 html2pdf 下载 PDF 文件时样式发生变化

Question

我正在使用 html2pdf 将 html 页面转换为 PDF 文件并下载。转换方面一切正常，PDF 文件已成功下载，但是当单击按钮生成文件时，发生了奇怪的行为，UI 更改了一秒（颜色、大小和文本字体元素变化如所附标题所示）

html2pdf 脚本：

          var opt = {
          pagebreak :   { after : ['.Card'] },
          margin:       1,
          filename:     'qrCodes.pdf',
          image:        { type: 'png', quality: 0.98 },
          html2canvas:  { scale: 2 },
          jsPDF:        { unit: 'pt', format: 'letter', orientation: 'portrait' }
        };
        html2pdf().from(myDocument).set(opt).save();

正常UI状态： Picture of normal UI state 生成 PDF 时： Picture of UI weird behavior When generating the PDF

这个问题让我抓狂，有解决办法吗？

Answer 1

问题是由于 JavaScript 是单线程的，所以这种类型的进程必须通过服务工作者在单独的线程中实现。实际上这个问题在 html2pdf 中打开但没有解决：The html2pdf processing freezes the UI

或者作为解决方法，您可以在单独的组件中启动转换过程，这样它就不会影响当前的 UI。

UI 使用 html2pdf 下载 PDF 文件时样式发生变化

UI style changes when downloading PDF file using html2pdf

javascript

angular

typescript

html2pdf