angular - 使用 Angular 10 在 HTML2Canvas 中显示令人惊叹的图标

Question

我正在尝试在 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");
    });


  }

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

谢谢你。

Answer 1

这是关于 svg 元素的高度和宽度的问题，导致它们没有出现。在画布处理之前添加了以下代码和平。

let svgElements = document.body.querySelectorAll('svg');
    svgElements.forEach(function(item) {
      item.setAttribute("width", String(item.getBoundingClientRect().width));
      item.setAttribute("height", String(item.getBoundingClientRect().height));
      item.style.width = null;
      item.style.height= null;
    });