Angular Html2Pdf - DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot'。

Question

使用Angular 12实现html2pdf，将HTML页面的部分内容转换为PDF以进行下载。

控制台错误

index-7a8b7a1c.js:150 Uncaught (in promise) DOMException：在'ShadowRoot'上设置'adoptedStyleSheets'属性失败：不允许在多个文档中共享构造的样式表

HTML

<section id="toPdfContainer">
    <h5 class="card-title">Hello WOrld!</h5>
</section>
<button class="btn btn-primary w-100" (click)="toPdf()">TO PDF</button>

脚本

import * as html2pdf from 'html2pdf.js';

...

public toPdf() {
   const elementToPdf = document.getElementById('toPdfContainer');
   console.log('to PDF', elementToPdf);
   const opt = {
      margin: 1,
      filename: 'myfile.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
   };
   html2pdf().set(opt).from(elementToPdf).save();
}

有人能帮我解决这个问题吗？

- Evan

---

你最终解决了吗？我现在在使用 Angular 14 也遇到了同样的问题。 - Andrew

@Andrew，还没有找到任何解决方案。 - Evan

Answer 1

这似乎是一个TypeScript的“问题”。我说“问题”，因为它是在4.8中添加的一个功能。

但请注意，更新到TypeScript 4.8需要将Angular更新到>=14.2.0。在该版本之前的任何版本都不兼容TypeScript 4.8（您将收到有关装饰器的编译错误）。

- Andrew