[英]How do you concatenate two or images in pdf using Html2Canvas & JsPDF?
I am trying to wrap my head around HTML2Canvas' API but the documentation is extremely limited. 我试图围绕HTML2Canvas的API进行研究,但是文档非常有限。 The situation is that I am putting 2 or more div's (thier content) into a single PDF where each div represents a different page.
情况是,我将2个或多个div(它们的内容)放入单个PDF中,其中每个div代表一个不同的页面。 Sounds easy right ?
听起来容易吗? Not really.
并不是的。 I have tried everything to make this work, but the asynchournous nature of JS is making this way harder than it has to be.
我已经尽一切努力使此工作正常进行,但是JS的异步特性使这种方法比必须的更加困难。
Here is what I have 这是我所拥有的
html2canvas($("#monthly_agg_report_container"), {
onrendered: function(canvas)
{
var doc = new jsPDF('landscape', 'pt','a2');
var imgData = canvas.toDataURL("image/png");
doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);
doc.save('report.pdf') ;
}
}).then(function(){
//another html2canvas doesnt work. PDF comes with a empty page. Because `doc` is out of scope
alert('done')
})
This is the code that worked for me: 这是对我有用的代码:
function generatePDF() {
var doc = new jsPDF('landscape', 'pt','a2');
console.log(doc);
html2canvas($("#monthly_agg_report_container"), {
onrendered: function(canvas)
{
var imgData = canvas.toDataURL("image/png");
doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);
// doc.save('report.pdf') ;
}
}).then(function(){
html2canvas($("#descriptor_stats_container"), {
onrendered: function(canvas)
{
console.log('2nd doc '+doc);
doc.addPage();
var imgData = canvas.toDataURL("image/png", 1.0);
doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);
//doc.save('report.pdf') ;
}
}).then(function(){
alert('done')
html2canvas($("#alerts_stats_container"), {
onrendered: function(canvas)
{
console.log('2nd doc '+doc);
doc.addPage();
var imgData = canvas.toDataURL("image/png");
doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);
doc.save('report.pdf') ;
}
})
})
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.