JSPDF无法使用在线src添加图像。

Question

在一个web应用中，我正在使用JSPDF将html转换成pdf。所有工作都很顺利，除了图片。后来，我发现它添加指向本地资源的图片；相反，它不会添加指向在线资源的图片，并且在图片的位置上留下了一个空白区域，好像期望它但无法加载。

例如：<img src="img/house.jpg"/> 正确添加。 <img src="https://myurl.com/house.jpg"/> 没有正确添加；空白区域代替了图片。

该怎么解决？也许将图像暂时存储在本地？我尝试使用addImage()，但很难使用，不仅因为我改变了pdf的比例因素，而且主要是因为pdf的内容是动态的，我不知道图像的大小或者准确的位置。

- panagulis72

---

这可能会有所帮助 https://jsfiddle.net/epistemex/Lsx53yn2/ - Rachel Gallen

Answer 1

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

至于图像旋转，如果旋转后看到空白页，可能只是因为图像超出了边界。有关详细信息，请参见此答案。

"Original 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()固定。有关详细信息，请参见此答案。您可以使用window.open(pdf.output('bloburl'))进行调试。

- Weihui Guo