Html2Canvas 和 jsPDF 每页添加一张图片

Question

我正在使用 jsPDF 和 html2canvas (0.4.1) 将 dive 中的图像保存为单一 pdf。

到目前为止，我的代码几乎可以正常工作，但我遇到了一个问题。

当用户选择多张图片时，图片保存在一页中。所以我想要不同页面中的每个图像。我的代码是：

<div id="imagesPreview"></div>

<script>
$(document).ready(function(){
$("#modalSave").click(function(){

var inputValue = $('#form29').val()
var imagesnumber = $("#imagesPreview img").length;
//alert(imagesnumber);

var imgData;
html2canvas(document.getElementById("imagesPreview"),{
    useCORS: true,
    onrendered:function(canvas){
    imgData = canvas.toDataURL('image/png');
    //Make The Pdf Document
    var doc = new jsPDF('p','pt','a4');

    if (imagesnumber > 1){
        var i;
        for (i = 1; i < imagesnumber; i++) 
        {
        doc.addImage(imgData,'PNG',10,10)[i];
        doc.addPage()[i];
        }
    }else{
        doc.addImage(imgData,'PNG',10,10);
    }

        if($('#inputValue').val() == ''){
    doc.save('MyPdf.pdf');
    }else{
    doc.save(inputValue+'.pdf');
    }
    window.open(imgData);
    }

    })

});
});
</script>

我正在使用 imagesnumber 来计算 div 中的图像数量。

有什么想法吗？

Answer 1

你可以这样做：

遍历所有图像
边走边制作 canvas PNG
随时将这些添加到 PDF
检查数组长度是否有更多图像。如果是这样，addPage()
添加 then() 方法以确保它仅在所有操作完成后才保存 PDF。此外，在此 then() 方法中，检查循环索引的位置，以便仅在添加最后一张图像后才保存 PDF。

In my example, those two little blue blocks will be the images that gets added to the PDF. Now, this example won't run on Stack Overflow due to sandbox limitations, but you can see the working JSFiddle here.

const imgs = [...document.querySelectorAll('.img')]
const btn = document.querySelector('a')

btn.addEventListener('click', () => {
    const doc = new jsPDF()
    imgs.forEach((a, i) => {
        html2canvas(a)
        .then(canvas => {
            const img = canvas.toDataURL('image/png')
            doc.addImage(img,'PNG', 45, 45, 100, 100);
            if (imgs.length > (i+1)) {
                doc.addPage()
            }
        })
        .then(() => {
            if ((i+1) === imgs.length) {
                doc.save('MyPdf.pdf')
            }
        })
    })
})

span {width: 20px; height: 20px; background-color: blue; display: inline-block}
a {display: block}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" crossorigin="anonymous"></script>
<span class="img"></span>
<span class="img"></span>
<a href="#">Download PDF</a>

UPDATE

下面介绍了如何使用 <img> 标签做同样的事情，而不是使用 Html2canvas 创建图像。在此示例中，您根本不需要 Html2canvas。我更新了上面的 JSFiddle link 来展示这个例子。

const imgs = [...document.querySelectorAll('.img')]
const btn = document.querySelector('a')

btn.addEventListener('click', () => {
    const doc = new jsPDF()
    let dataUrl
    async function makeImg(img) {
        let blob = await fetch(img.src).then(res => res.blob());
        dataUrl = await new Promise(resolve => {
            let reader = new FileReader();
            reader.onload = () => resolve(reader.result);
            reader.readAsDataURL(blob);
        })
    }
    imgs.forEach((a, i) => {
        makeImg(a)
        .then(res => {
            doc.addImage(dataUrl, 'PNG', 45, 45, a.style.width, a.style.height)
            if (imgs.length > (i+1)) {
                doc.addPage()
            }
        })
        .then(() => {
            if ((i+1) === imgs.length) {
                doc.save('MyPdf.pdf')
            }
        })
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<img class="img" src="https://i.postimg.cc/NfMXcB4c/Screenshot-2020-06-09-at-18-35-56.png">
<img class="img" src="https://i.postimg.cc/NfMXcB4c/Screenshot-2020-06-09-at-18-35-56.png">
<a href="#" style="display: block">Download PDF</a>

Html2Canvas 和 jsPDF 每页添加一张图片

Html2Canvas and jsPDF add 1 image per page

javascript

jquery

html2canvas

jspdf