JSPDF 不添加带有在线 src 的图像

Question

在 Web 应用程序中，我使用 JSPDF 将 html 转换为 pdf。一切正常，除了图像。过了一会儿，我注意到它添加了指向本地资源的图像；相反，它不会添加指向在线资源的图像，并在图像的位置留下一个空白空间，就好像他期待它但无法加载它一样。

例如：<img src="img/house.jpg"/> 已正确添加。 <img src="https://myurl.com/house.jpg"/> 未正确添加；有一个空白区域而不是图像。

我该如何解决？也许将图像临时存储在本地？我尝试使用 addImage() 但它很难使用，不仅因为我改变了 pdf 的比例因子，而且主要是因为 pdf 的内容是动态的，我不知道什么大小图像将具有或它们的确切位置。

Answer 1

您需要确保在addIMage() 之前加载图像。以下代码是我用来在线将多张图像转换为 PDF 文件的代码。它将根据图像/页面的方向旋转图像并设置适当的边距。请注意，此代码仅用于图像，而不是嵌入图像的 Html 页面，但img.onload 的概念保持不变。

关于图片旋转，如果旋转后看到空白页，可能只是图片超出范围。有关详细信息，请参阅此answer。

function exportPdf(urls) {
    let pdf = new jsPDF('l', 'mm', 'a4');
    const pageWidth = pdf.internal.pageSize.getWidth();
    const pageHeight = pdf.internal.pageSize.getHeight();
    const pageRatio = pageWidth / pageHeight;

    for (let i = 0; i < urls.length; i++) {
        let img = new Image();
        img.src = urls[i];
        img.onload = function () {
            const imgWidth = this.width;
            const imgHeight = this.height;
            const imgRatio = imgWidth / imgHeight;
            if (i > 0) { pdf.addPage(); }
            pdf.setPage(i + 1);
            if (imgRatio >= 1) {
                const wc = imgWidth / pageWidth;
                if (imgRatio >= pageRatio) {
                    pdf.addImage(img, 'JPEG', 0, (pageHeight - imgHeight / wc) / 2, pageWidth, imgHeight / wc, null, 'NONE');
                }
                else {
                    const pi = pageRatio / imgRatio;
                    pdf.addImage(img, 'JPEG', (pageWidth - pageWidth / pi) / 2, 0, pageWidth / pi, (imgHeight / pi) / wc, null, 'NONE');
                }
            }
            else {
                const wc = imgWidth / pageHeight;
                if (1 / imgRatio > pageRatio) {
                    const ip = (1 / imgRatio) / pageRatio;
                    const margin = (pageHeight - ((imgHeight / ip) / wc)) / 4;
                    pdf.addImage(img, 'JPEG', (pageWidth - (imgHeight / ip) / wc) / 2, -(((imgHeight / ip) / wc) + margin), pageHeight / ip, (imgHeight / ip) / wc, null, 'NONE', -90);
                }
                else {

                    pdf.addImage(img, 'JPEG', (pageWidth - imgHeight / wc) / 2, -(imgHeight / wc), pageHeight, imgHeight / wc, null, 'NONE', -90);
                }
            }
            if (i == urls.length - 1) {
                pdf.save('Photo.pdf');
            }
        }
    }
}

如果这有点难以理解，你也可以使用.addPage([imgWidth, imgHeight])，这样更直接。这种方法的缺点是第一页被new jsPDF()固定。有关详细信息，请参阅this answer。你可以使用window.open(pdf.output('bloburl')) to debug。