离子cordova angular html2canvas和pdfMake在手机上下载pdf文件截图

Question

我被困在那3天了。

在Android和IOS手机上。当我点击一个按钮时，我需要一个功能，它可以对页面的离子内容进行一次扫描并在手机上下载。

我找到了如何用html2canvas做pdf：

html2canvas(document.getElementById("exportthis"), {
  onrendered: function (canvas) {

    var contentWidth = canvas.width;
    var contentHeight = canvas.height;

    //The height of the canvas which one pdf page can show;
    var pageHeight = contentWidth / 592.28 * 841.89;
    //the height of canvas that haven't render to pdf
    var leftHeight = contentHeight;
    //addImage y-axial offset
    var position = 0;
    //a4 format [595.28,841.89]       
    var imgWidth = 595.28;
    var imgHeight = 592.28 / contentWidth * contentHeight;

    var pageData = canvas.toDataURL('image/jpeg', 1.0);
    console.log(pageData);

    var pdf = new jsPDF('', 'pt', 'a4');
    console.log(pdf);

    if (leftHeight < pageHeight) {
      pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
    } else {
      while (leftHeight > 0) {
        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight;
        position -= 841.89;
        //avoid blank page
        if (leftHeight > 0) {
          pdf.addPage();
          console.log('>0 : ', pdf);
        }
      }
    }

    pdf.save('aircraft.pdf');

  }


})

以及如何使用pdfMake（pdfMake link）在手机上下载pdf。

但我找不到如何把它放在一起工作在设备上。

以下是我现在所拥有的所有内容，但是如果this.pdfObj为空则不起作用：

createPdf() {
html2canvas(document.getElementById("exportthis"), {
  onrendered: function (canvas) {
    var contentWidth = canvas.width;
    var contentHeight = canvas.height;

    //The height of the canvas which one pdf page can show;
    var pageHeight = contentWidth / 592.28 * 841.89;
    //the height of canvas that haven't render to pdf
    var leftHeight = contentHeight;
    //addImage y-axial offset
    var position = 0;
    //a4 format [595.28,841.89]       
    var imgWidth = 595.28;
    var imgHeight = 592.28 / contentWidth * contentHeight;

    var data = canvas.toDataURL('image/jpeg', 1.0);
    var docDefinition = {
      content: [{
        image: data,
        width: imgWidth,
        height: imgHeight,
        position: position
      }]
    };
    this.pdfObj = pdfMake.createPdf(docDefinition);
    console.log("obj : ", this.pdfObj);

    if (this.pdfObj) {
    console.log("it works");
    if (this.plt.is('cordova')) {
    this.pdfObj.getBuffer((buffer) => {
      var blob = new Blob([buffer], { type: 'application/pdf' });

      // Save the PDF to the data Directory of our App
      this.file.writeFile(this.file.dataDirectory, 'aircraft.pdf', blob, { replace: true }).then(fileEntry => {
        // Open the PDf with the correct OS tools
        this.fileOpener.open(this.file.dataDirectory + 'aircraft.pdf', 'application/pdf');
      })
    });
    } else {
      // On a browser simply use download!
      this.pdfObj.download('aircraft.pdf');
    }
  }
  else{
    console.log("fail");
  }
  }
});

}

有人可以帮帮我吗？

Answer 1

我找到了帮助问题。对于有兴趣的人，有解决方案：

createPdf() {
html2canvas(document.getElementById("exportthis"), {
  onrendered: function (canvas) {
    var contentWidth = canvas.width;
    var contentHeight = canvas.height;

    //The height of the canvas which one pdf page can show;
    var pageHeight = contentWidth / 592.28 * 841.89;
    //the height of canvas that haven't render to pdf
    var leftHeight = contentHeight;
    //addImage y-axial offset
    var position = 0;
    //a4 format [595.28,841.89]       
    var imgWidth = 595.28;
    var imgHeight = 592.28 / contentWidth * contentHeight;

    var data = canvas.toDataURL('image/jpeg', 1.0);
    var docDefinition = {
      content: [{
        image: data,
        width: imgWidth,
        height: imgHeight,
        position: position
      }]
    };
    this.pdfObj = pdfMake.createPdf(docDefinition);
    console.log("obj : ", this.pdfObj);

    if (this.pdfObj) {
      console.log("it works");
      if (this.plt.is('cordova')) {
        this.pdfObj.getBuffer((buffer) => {
          var blob = new Blob([buffer], { type: 'application/pdf' });

          // Save the PDF to the data Directory of our App
          this.file.writeFile(this.file.dataDirectory, 'aircraft.pdf', blob, { replace: true }).then(fileEntry => {
            // Open the PDf with the correct OS tools
            this.fileOpener.open(this.file.dataDirectory + 'aircraft.pdf', 'application/pdf');
          })
        });
      } else {
        // On a browser simply use download!
        this.pdfObj.download('aircraft.pdf');
      }
    }
    else {
      console.log("fail");
    }
  }.bind(this) <-------- Solution
});

}