html2canvas 和 pdfmake 不显示 PDF 中的图像答案

【问题标题】：html2canvas and pdfmake not showing images in PDFhtml2canvas 和 pdfmake 不显示 PDF 中的图像
【发布时间】：2018-10-18 21:22:57
【问题描述】：

使用html2canvas 和pdfmake 将HTML 导出为PDF 文件。在 AngularJS 框架中执行此操作。

我遇到的问题是，HTML 中的图像未显示在 PDF 文件中。 data 确实包含一个 base64 字符串，但是当我解码它时没有图像（只有我写的表格和文本）。我在这里做错了什么？

html2canvas($("#pdfFileToExport"), {
    onrendered: function (canvas) {
        var data = canvas.toDataURL();
        var docDefinition = {
            content: [{
                image: data,
                width: 500
            }]
        };
        pdfMake.createPdf(docDefinition).download("fileName.pdf");
    }
});

【问题讨论】：

标签： angularjs pdf pdf-generation html2canvas pdfmake

【解决方案1】：

图片的网址是什么？它是否来自您的应用程序运行的其他主机？默认情况下 html2canvas 块跨源图像。您可以使用“代理”选项覆盖它，但我认为 chrome 仍会阻止跨源图像。最好的办法是确保您的图片与页面使用的来源相同。

请参阅此处的“限制”部分： http://html2canvas.hertzen.com/documentation

【讨论】：