如何解决使用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。