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

【问题标题】：How can I combine multiple images into one page and print it as a pdf?如何将多个图像组合成一页并将其打印为 pdf？
【发布时间】：2021-04-13 00:51:09
【问题描述】：

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

未捕获的类型错误：CanvasRenderingContext2D.drawImage：参数 1 无法转换为以下任何一种：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');
}

【问题讨论】：

您好，看起来您的画布数据无法由画布元素呈现，这意味着您可能正在获取 html 画布而不是检索内部 cavas 上下文，请尝试呈现画布上下文而不是画布html元素

标签： javascript jspdf html2canvas

【解决方案1】：

由于您没有提及，我假设 html2canvas 来自 https://github.com/niklasvh/html2canvas

在这种情况下，这里的问题是hmtl2canvas 返回一个Promise，这就是您传递给verticalCanvases 而不是实际的画布元素的内容。

要修复它，只需将函数转换为异步函数，以便您可以使用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');
}

【讨论】：