Html2Canvas 不起作用...pdf 显示为空

Question

当我运行应用程序并单击按钮时，PDF 看起来是空的。

我通过 console.log() 查找，但 canvas 没有显示任何内容。

import { Component, OnInit } from '@angular/core';
import * as jspdf from 'jspdf'; 

import html2canvas from 'html2canvas';

  generatePDF(){

    html2canvas(document.getElementById('albaran')).then(canvas => {  
      // Few necessary setting options  
      var imgWidth = 208;   
      var pageHeight = 295;    
      var imgHeight = canvas.height * imgWidth / canvas.width;  
      var heightLeft = imgHeight;  

      const contentDataURL = canvas.toDataURL('image/png')  
      let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
      var position = 0;  
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)  
      pdf.save('MYPdf.pdf'); // Generated PDF   
    });  
  }

}

Answer 1

单击按钮后，从 DOM 加载元素会花费一些时间，因此使用 setTimeout 它将起作用。

import * as html2canvas from 'html2canvas';
import * as jspdf from 'jspdf';

     generatePDF() {           
        setTimeout(() => {
          const data = document.getElementById('printdiv');
          html2canvas(data).then(canvas => {
            // Few necessary setting options
            const imgWidth = 208;
            const pageHeight = 295;
            const imgHeight = canvas.height * imgWidth / canvas.width;
            let heightLeft = imgHeight;
            const contentDataURL = canvas.toDataURL('image/png');
            const pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
            let position = 0;
            pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
            //  pdf.text(190, 294, '1');
            let count = 1;
            while (heightLeft >= 0) {
              position = heightLeft - imgHeight;
              pdf.addPage();
              pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
              //  pdf.text(150, 10, 'this test meaasage');
              count++;
              //    pdf.text(190, 294, count.toString());
              heightLeft -= pageHeight;
            }
            const date = this.datePipe.transform(new Date(), 'dd/MM/yy');
            const text = 'Created At :' + date;
            pdf.setTextColor(163, 163, 163);
            pdf.text(10, 290, text);
            //   pdf.text(190, 294, count.toString());
            const currentuser = this.localstorgeservice.getCurrentUser();
            const url = 'URL:' + this.document.location.href;
            pdf.text(10, 280, url.toString());
            pdf.text(150, 290, currentuser.userid);
            pdf.save(this.bankingchannelname + '.pdf'); // Generated PDF
          });
        }, 700);

      }

Answer 2

终于，我找到了解决办法。我使用 jsPDF 和 dom-to-image 库。 https://www.npmjs.com/package/jspdf

https://www.npmjs.com/package/dom-to-image

import * as jsPDF from 'jspdf';
import domtoimage from 'dom-to-image';

exportPdf(){
    const div = document.getElementById('pdf');
    const options = { background: 'white', height: 845, width: 595 };
    domtoimage.toPng(div, options).then((dataUrl) => {
        //Initialize JSPDF
        const doc = new jsPDF('p', 'mm', 'a4');
        //Add image Url to PDF
        doc.addImage(dataUrl, 'PNG', 0, 0, 210, 340);
        doc.save('pdfDocument.pdf');
    }
}

Answer 3

在这里，

$(document).click(function () {
            domtoimage.toPng(document.body)
            .then(function (blob) {
            var pdf = new jsPDF('p', 'mm', 'a4');
            pdf.addImage(blob,'PNG', 0, 0, 210, 225);
            pdf.save("test.pdf");

            that.options.api.optionsChanged();
            });
        });

Html2Canvas 不起作用...pdf 显示为空

Html2Canvas doesn't works... the pdf shows empty

html2canvas

jspdf

ionic4

angular7