[英]Html2canvas for each div export to pdf separately
I have Page, It has 6 div with same class name "exportpdf", I am converting those div into pdf using jspdf and html2canvas 我有Page,它有6个具有相同类名“ exportpdf”的div,我正在使用jspdf和html2canvas将这些div转换为pdf
var elementTobePrinted = angular.element(attrs.selector),
iframeBody = elementTobePrinted.contents().find('div.exportpdf');
In html2canvas..... 在html2canvas .....
html2canvas(elementTobePrinted, {
onrendered: function (canvas) {
var doc = new jsPDF();
for(var i=1;i<elementTobePrinted.length;i++){
doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40, 180, 160);
doc.addImage(canvas.toDataURL("image/jpeg"),'JPEG', 0, 0, 215, 40)
doc.addPage();
}
doc.save(attrs.fileName);
}
I converted page to canvas.its create same div contents for whole pdf. 我将页面转换为canvas.its为整个pdf创建了相同的div内容。 I need each div contents into same pdf with different pages. 我需要将每个div内容转换为具有不同页面的pdf。
Can anyone help me? 谁能帮我?
The problem is with html2canvas: 问题出在html2canvas上:
doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40,180, 160);
Here I need to pass elementTobePrinted
list to addImage. 在这里,我需要将elementTobePrinted
列表传递给addImage。
I think the issue here is that elementTobePrinted
is not what you think it is. 我认为这里的问题是elementTobePrinted
不是您认为的那样。
When you run the code: 运行代码时:
var elementTobePrinted = angular.element(attrs.selector)
This will return you a list of every element that matches the conditions, so you said you have 6 of these elements ("It has 6 divs"). 这将为您返回匹配条件的每个元素的列表,因此您说您有6个这样的元素(“它有6个div”)。
Have you tried replacing: 您是否尝试过更换:
html2canvas(elementTobePrinted, {
onrendered: function (canvas) {
var doc = new jsPDF();
for(var i=1;i<elementTobePrinted.length;i++) {
doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40, 180, 160);
doc.addImage(canvas.toDataURL("image/jpeg"),'JPEG', 0, 0, 215, 40)
doc.addPage();
}
doc.save(attrs.fileName);
}
With... 用...
for(var i=0; i<elementTobePrinted.length; i++){
html2canvas(elementTobePrinted[i], {
onrendered: function (canvas) {
var doc = new jsPDF();
doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40, 180, 160);
doc.addImage(canvas.toDataURL("image/jpeg"),'JPEG', 0, 0, 215, 40)
doc.addPage();
doc.save(attrs.fileName);
}
}
The reason I suggest this is that html2Canvas wants a SINGLE element as its first parameter and your example above passes a list of elements (I think, assuming angular.element(attrs.selector)
finds all 6 divs you are trying to print). 我建议这样做的原因是html2Canvas希望将SINGLE元素作为其第一个参数,并且上面的示例传递了元素列表 (我认为,假设angular.element(attrs.selector)
找到要尝试打印的所有6个div)。
On angular 2(now 6) framework. 在Angular 2(现在为6)框架上。 u can use the logic as below, 您可以使用以下逻辑,
generateAllPdf()
function, 点击执行generateAllPdf()
函数, 6 id's
from my html collection, 从我的html集合中收集所有6 id's
, id
and call html2canvas
function, 遍历每个id
并调用html2canvas
函数, html2canvas
runs in background to process images, im using await
on function, 由于html2canvas
在后台运行以处理图像,即时通讯使用了功能await
, html2canvas
completes its process, i ll save the document, html2canvas
完成处理后,我将保存文档, await
i ll end-up in downloading an empty page. 如果假设我不会使用await
我会最终达到在下载一个空白页。 below is my code logic, 下面是我的代码逻辑,
// As All Functions in js are asynchronus, to use await i am using async here
async generateAllPdf() {
const doc = new jsPDF('p', 'mm', 'a4');
const options = {
pagesplit: true
};
const ids = document.querySelectorAll('[id]');
const length = ids.length;
for (let i = 0; i < length; i++) {
const chart = document.getElementById(ids[i].id);
// excute this function then exit loop
await html2canvas(chart, { scale: 1 }).then(function (canvas) {
doc.addImage(canvas.toDataURL('image/png'), 'JPEG', 10, 50, 200, 150);
if (i < (length - 1)) {
doc.addPage();
}
});
}
// download the pdf with all charts
doc.save('All_charts_' + Date.now() + '.pdf');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.