每个 div 分别导出为 pdf 的 Html2canvas答案

【问题标题】：Html2canvas for each div export to pdf separately每个 div 分别导出为 pdf 的 Html2canvas
【发布时间】：2014-03-14 03:12:51
【问题描述】：

我有页面，它有 6 个具有相同类名“exportpdf”的 div，我正在使用 jspdf 和 html2canvas 将这些 div 转换为 pdf

var elementTobePrinted = angular.element(attrs.selector),
iframeBody = elementTobePrinted.contents().find('div.exportpdf');

在 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);
}

我将页面转换为画布。它为整个 pdf 创建相同的 div 内容。我需要将每个 div 内容放入具有不同页面的相同 pdf 中。

谁能帮帮我？

问题出在html2canvas上：

doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40,180, 160);

这里我需要将elementTobePrinted 列表传递给addImage。

【问题讨论】：

标签： javascript html2canvas

【解决方案1】：

我认为这里的问题是elementTobePrinted不是你想的那样。

当你运行代码时：

var elementTobePrinted = angular.element(attrs.selector)

这将为您返回与条件匹配的每个元素的列表，因此您说您有 6 个这样的元素（“它有 6 个 div”）。

您是否尝试过替换：

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);
}

随着...

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);
    }
}

我建议这样做的原因是 html2Canvas 想要一个 SINGLE 元素作为其第一个参数，而您上面的示例传递了一个 list 元素（我认为，假设 angular.element(attrs.selector)找到您尝试打印的所有 6 个 div）。

【讨论】：

【解决方案2】：

在 Angular 2（现在是 6）框架上。你可以使用如下逻辑，

点击执行generateAllPdf()函数，
从我的 html 集合中收集所有 6 id's，
遍历每个id并调用html2canvas函数，
html2canvas 在后台运行以处理图像，我正在使用 await 在功能上，
html2canvas 完成其进程后，我将保存文件，
如果我不使用await，我最终会下载一个空的页面。

下面是我的代码逻辑，

// 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');
  }

【讨论】：