每個div的HTML2canvas分別導出到pdf

Question

我有Page，它有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);
}

我將頁面轉換為canvas.its為整個pdf創建了相同的div內容。 我需要將每個div內容轉換為具有不同頁面的pdf。

誰能幫我？

問題出在html2canvas上：

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

在這里，我需要將elementTobePrinted列表傳遞給addImage。

Answer 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元素作為其第一個參數，並且上面的示例傳遞了元素列表 （我認為，假設angular.element(attrs.selector)找到要嘗試打印的所有6個div）。

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