ionic cordova angular html2canvas и pdfMake скачать скриншот в pdf файл на телефон

Question

Вот уже 3 дня я застрял на этом.

На телефоне Android и IOS.Мне нужно, когда я нажимаю на кнопку функцию, которая делает снимок ионного содержимого страницы и загружает его на телефон.

Я нашел, как сделать PDF с html2canvas:

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

  }


})

и как загрузить pdf на телефон с помощью pdfMake ( pdfMake link ).

Но я не могу найти способ собрать его для работы в устройстве.

Вот то, что у меня есть сейчас, когда все собрано, но оно не работает, если 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
});

}