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

Question

When I run the app and I click on the button, the PDF looks empty.

I was looking for by console.log() and the canvas doesn't show anything.

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

}

It's probably the version of html2canvas. See if this answer is helpful: https://stackoverflow.com/a/56481588/4271117 — Weihui Guo, Jun 07 '19 at 11:54

Oscar Diaz · Accepted Answer · 2019-06-19T10:44:14.093

3

Finally, I have found a solution. I use jsPDF and dom-to-image libraries. 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');
    }
}

edited Jun 19 '19 at 10:44

answered Jun 19 '19 at 10:30

Oscar Diaz

109
2
8

These domtoimage plugin options don't show the white background after converting HTML to image. And then I just need manually put background: white inside the Html div to make it work – Snowbases Nov 06 '19 at 09:33
I don't have any idea why html2canvas was not working, This solved my problem. Thanks a ton. +1 – Arijit May 19 '20 at 00:19

score 0 · Answer 2 · answered Jun 03 '19 at 04:53

Once you click on the button it will take time while loading an element from DOM so using setTimeout it will work.

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

      }

Sorry, this doesnt works. The problem is html2canvas doesn't take the div content. if I look the canvas.toDataURL(), the image is empty. — Oscar Diaz, Jun 03 '19 at 16:24

score 0 · Answer 3 · answered Nov 17 '19 at 06:20

Here it is,

$(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 doesn't works... the pdf shows empty

3 Answers3