[英]How can I combine multiple images into one page and print it as a pdf?
I've a webpage with 4 charts.我有一个包含 4 个图表的网页。 I'm taking separate screenshots for each of them.我正在为他们每个人拍摄单独的屏幕截图。 Then tried to put them on another canvas, show them vertically and print it as single-page pdf file.然后尝试将它们放在另一个 canvas 上,垂直显示并将其打印为单页 pdf 文件。 But, I'm getting an Error saying:但是,我收到一条错误消息:
Uncaught TypeError: CanvasRenderingContext2D.drawImage: Argument 1 could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.未捕获的类型错误: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, ny, 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'); }
Since you didn't mention it, I'll assume html2canvas
is coming from https://github.com/niklasvh/html2canvas既然你没有提到它,我会假设html2canvas
来自https://github.com/niklasvh/html2canvas
In that case, the issue here is that hmtl2canvas
returns a Promise
and that's what you're passing to verticalCanvases
instead of the actual canvas element.在这种情况下,这里的问题是hmtl2canvas
返回一个Promise
,这就是您传递给verticalCanvases
而不是实际的 canvas 元素的内容。
To fix it just transform the function in an asynchronous one so you can use async
/ await
:要修复它,只需将 function 转换为异步的,这样您就可以使用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');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.