如何将带有图像的 HTML 转换为 PDF答案

【问题标题】：How to convert HTML with images into PDF如何将带有图像的 HTML 转换为 PDF
【发布时间】：2019-12-08 15:57:57
【问题描述】：

我们需要将带有图像的 HTML 下载到 Pdf 文件中。

我们为此使用了 html2canvas 和 jsPDF，但它只导出 HTML，一些图像也用于 HTML，这些图像不是 Pdf 文件。

import html2canvas from 'html2canvas';
import * as jsPDF from 'jspdf';

downloadPdf() {
    var data = document.getElementById('v-9');
    html2canvas(data).then(canvas => {
        var imgWidth = canvas.width > 198 ? 198 : canvas.width;
        var imgHeight = canvas.height * imgWidth / canvas.width;
        const contentDataURL = canvas.toDataURL('image/png')
        let pdf = new jsPDF('p', 'mm', 'a4'); // A4 size page of PDF  
        var position = 5;
        pdf.addImage(contentDataURL, 'PNG', 5, position, imgWidth, imgHeight)
        pdf.save('file.pdf'); // Generated PDF   
    });
}

<button id="roomChildrenClear" class="btn btn-block" type="button" (click)="downloadPdf()">Download</button>


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="v-9" width="100%" height="100%">
<g id="v-10" class="joint-viewport">
    <g model-id="a3bf26bd-bdbf-4e3a-84e9-7ba266a33f59" id="j_4" class="joint-cell joint-type-basic joint-type-basic-image joint-element joint-theme-default" data-type="basic.Image" fill="#ffffff" stroke="none" transform="translate(1,1)">
        <g class="rotatable" id="v-26">
            <g class="scalable" transform="scale(3.125,3.125)">
                <image id="v-28" xlink:href="../../images/icons/door.png" width="16" height="16"></image>
            </g>
            <text id="v-27" font-size="14" display="none" xml:space="preserve" y="0.8em" text-anchor="middle" fill="#000000" font-family="Arial, helvetica, sans-serif" transform="matrix(1,0,0,1,25,70)">
            <tspan id="v-29" class="v-line v-empty-line" dy="0em" style="fill-opacity: 0; stroke-opacity: 0;">-</tspan>
        </text>
        </g>
    </g>
    <g model-id="c4349d44-5b4e-4d3b-ba73-73691cd88c29" id="j_5" class="joint-cell joint-type-basic joint-type-basic-rect joint-element joint-theme-default" data-type="basic.Rect" fill="#ffffff" stroke="none" transform="translate(1,1)">
        <g class="rotatable" id="v-30">
            <g class="scalable" transform="scale(0.5,0.8333333333333334)">
                <rect id="v-31" fill="#1240AB" stroke="#1240AB" width="100" height="60" stroke-miterlimit="10" dbid="doorid123:0" fill-opacity="0.03"></rect>
            </g>
            <text id="v-32" font-size="14" display="none" xml:space="preserve" y="0.8em" fill="#000000" text-anchor="middle" font-family="Arial, helvetica, sans-serif" transform="matrix(1,0,0,1,25,25)">
            <tspan id="v-33" class="v-line v-empty-line" dy="0em" style="fill-opacity: 0; stroke-opacity: 0;">-</tspan>
        </text>
        </g>
    </g>
</g>
<defs id="v-11"></defs>
</svg>

实际：图像图标未显示在 pdf 文件中。

预期：图像图标应显示在 pdf 文件中。

【问题讨论】：

标签： angular

【解决方案1】：

您可以尝试将这些配置设置为选项参数：

html2canvas(data, {
useCORS: true,
foreignObjectRendering: true,
allowTaint: true
})

如果这对您不起作用，我将在此处附上文档链接： https://html2canvas.hertzen.com/configuration

在某些情况下，尝试微调这些选项配置会得到令人满意的结果。

我自己在 Angular 5 应用程序上尝试同样的问题时遇到了这个问题，并通过使用 puppeteer 访问我自己的应用程序解决了这个问题。你也可以试试 puppeteer：https://pptr.dev

关于我的问题的讨论链接： Html2Canvas foreignObjectRendering only render viewpoint Html2Canvas foreignObjectRendering only render viewpoint

希望我的回答对你有所帮助。

【讨论】：

谢谢，@Cod3n0d3 的回复，现在我在 img src 中使用 base64，问题在 src 中使用 base64 得到解决。