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

【问题标题】：Show fortawesome icons in HTML2Canvas with Angular 10使用 Angular 10 在 HTML2Canvas 中显示令人惊叹的图标
【发布时间】：2021-05-19 10:04:46
【问题描述】：

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


  }

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

谢谢。

【问题讨论】：

标签： angular pdf-generation html2canvas pdfmake angular-fontawesome

【解决方案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;
    });

【讨论】：