如何将多个图像合并为一页并将其打印为 pdf？

Question

我的网页有 4 个图表。我正在为他们每个人拍摄单独的屏幕截图。然后尝试将它们放在另一个 canvas 上，垂直显示它们并将其打印为单页 pdf 文件。但是，我收到一条错误消息：

Uncaught TypeError: CanvasRenderingContext2D.drawImage: Argument 1 could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.

这是脚本

function HTMLtoPDF() {

    function verticalCanvases(cnv1, cnv2, cnv3, cnv4) {
        var newCanvas = document.createElement('canvas'),
            ctx = newCanvas.getContext('2d'),
            width = cnv1.width,
            height = cnv1.height + cnv2.height + cnv3.height + cnv4.height;
    
        newCanvas.width = width;
        newCanvas.height = height;
    
        [{
            cnv: cnv1,
            y: 0
        },
        {
            cnv: cnv2,
            y: cnv1.height
        },
        {
            cnv: cnv3,
            y: cnv1.height + cnv2.height
        },
        {
            cnv: cnv4,
            y: cnv1.height + cnv2.height + cnv3.height

        }].forEach(function(n) {
            ctx.beginPath();
            ctx.drawImage(n.cnv, 0, n.y, width, n.cnv.height);
        });
    
         var imgdata = newCanvas.toDataURL();

        return imgdata;
    }

    var forms = $('[id^=caspioform]');

    var canvas1 = html2canvas(forms[3]);
    var canvas2 = html2canvas(forms[5]);
    var canvas3 = html2canvas(forms[7]);
    var canvas4 = html2canvas(forms[9]);

    var dURL = verticalCanvases(canvas1, canvas2, canvas3, canvas4);

    var doc = new jsPDF("p", "mm", "a4");

    var width = doc.internal.pageSize.getWidth();
    var height = doc.internal.pageSize.getHeight();

    doc.addImage(dURL, 'PNG', 0, 0, width, height);

    doc.save('sample.pdf');
}

Answer 1

既然你没有提到，我假设 html2canvas 来自 https://github.com/niklasvh/html2canvas

在那种情况下，这里的问题是 hmtl2canvas returns 一个 Promise 而这就是你传递给 verticalCanvases 而不是实际的 canvas元素.

要修复它，只需将函数转换为异步函数，这样您就可以使用 async/await:

// |
// |
// v
async function HTMLtoPDF() {

    function verticalCanvases(cnv1, cnv2, cnv3, cnv4) {
        var newCanvas = document.createElement('canvas'),
            ctx = newCanvas.getContext('2d'),
            width = cnv1.width,
            height = cnv1.height + cnv2.height + cnv3.height + cnv4.height;
    
        newCanvas.width = width;
        newCanvas.height = height;
    
        [{
            cnv: cnv1,
            y: 0
        },
        {
            cnv: cnv2,
            y: cnv1.height
        },
        {
            cnv: cnv3,
            y: cnv1.height + cnv2.height
        },
        {
            cnv: cnv4,
            y: cnv1.height + cnv2.height + cnv3.height

        }].forEach(function(n) {
            ctx.beginPath();
            ctx.drawImage(n.cnv, 0, n.y, width, n.cnv.height);
        });
    
         var imgdata = newCanvas.toDataURL();

        return imgdata;
    }

    var forms = $('[id^=caspioform]');

    var canvas1 = await html2canvas(forms[3]); // <--
    var canvas2 = await html2canvas(forms[5]); // <--
    var canvas3 = await html2canvas(forms[7]); // <--
    var canvas4 = await html2canvas(forms[9]); // <--

    var dURL = verticalCanvases(canvas1, canvas2, canvas3, canvas4);

    var doc = new jsPDF("p", "mm", "a4");

    var width = doc.internal.pageSize.getWidth();
    var height = doc.internal.pageSize.getHeight();

    doc.addImage(dURL, 'PNG', 0, 0, width, height);

    doc.save('sample.pdf');
}

如何将多个图像合并为一页并将其打印为 pdf？

How can I combine multiple images into one page and print it as a pdf?

javascript

html2canvas

jspdf

这是脚本