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。

JSPDF不会使用在线src添加图像

1 个答案: