Html2Canvas не работает ... PDF показывает пустой - PullRequest
Новая
       29

Html2Canvas не работает ... PDF показывает пустой

0 голосов
/ 02 июня 2019

Когда я запускаю приложение и нажимаю на кнопку, PDF выглядит пустым.

Я искал по console.log(), и холст ничего не показывает. 

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

}

Ответы [ 2 ]

0 голосов
/ 19 июня 2019

Наконец-то я нашел решение. Я использую библиотеки 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');
    }
}
0 голосов
/ 03 июня 2019

Как только вы нажмете кнопку, загрузка элемента из 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);

      }
...