使用 Angular 10 在 HTML2Canvas 中显示强大的图标

问题描述

我正在尝试在 Angular 10 应用程序中使用 HTML2Canvas (https://html2canvas.hertzen.com/) 和 PdfMake 将 html 页面导出为 pdf。

问题是 FortAwesome 图标没有显示在生成的画布中。

在 component.html 中使用我的图标如下：

<div id="printDiv" class="overview-table-container">
        <table class="table table-striped">
          <thead>
          <tr>
            .
            .
          </tr>
          </thead>
          <tbody>
          <tr>
            .
            <td><fa-icon [icon]="faBolt"></fa-icon></td>
            .
          </tr>
          </tbody>
        </table>
      </div>

在我的 component.ts 中：

  htmltoPDF()
  {

    html2canvas(document.querySelector("#printDiv")).then(canvas => {
      let data = canvas.toDataURL();
      let docDeFinition = {
        content: [{
          image: data,width: 500,}]
      };


      pdfMake.createPdf(docDeFinition).download("test.pdf");
    });


  }

我读到这个问题可能是由于没有在画布上添加字体引起的，但我不知道如何实现。有什么想法吗？

谢谢。

解决方法

这是关于 svg 元素的高度和宽度的问题，导致它们没有出现。在canvas处理前添加了following of code。

 <ItemGroup>
    <RuntimeHostConfigurationOption Include="System.Globalization.UseNls"Value="true" />
 </ItemGroup>