1

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 }); } }
Improve this question
1

3 Answers 3

Reset to default
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'); } }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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
I don't have any idea why html2canvas was not working, This solved my problem. Thanks a ton. +1
0

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); }
Improve this answer

2 Comments

Sorry, this doesnt works. The problem is html2canvas doesn't take the div content. if I look the canvas.toDataURL(), the image is empty.
use setTimeout(() => {},100);
0

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(); }); });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.