Angular 2 - How to export html to pdf?

Question

How do I make a download button for saving HTML div content as PDF file inside my angular2 project?

This is the HTML content

<div id="obrz">
  <br><br>
  <p class="float-right font-weight-bold">Образац ЗПО</p>
  <br>
  <p class="float-left font-weight-bold">Подаци о обвезнику:</p>

  <br>

  <div class="row" style="width:100%">
    <div class="col-md-2"><p>Порески обвезник:</p></div>
    <div class="col-md-10"><input value="{{userModel.imeIprezime}}" type="text" class="form-control form-control-sm border-1 border-top-0 border-right-0 border-left-0" style="border-bottom: 1px solid black"></div>
    <div class="col-md-2"><p>ПИБ:</p></div>
    <div class="col-md-10"><input value="{{userModel.PIB}}" type="text" class="form-control form-control-sm border-1 border-top-0 border-right-0 border-left-0" style="border-bottom: 1px solid black"></div>
    <div class="col-md-2"><p>Адреса:</p></div>
    <div class="col-md-10"><input value="{{userModel.ulica + ' ' + userModel.broj + ' ' + userModel.grad}}" type="text" class="form-control form-control-sm border-1 border-top-0 border-right-0 border-left-0" style="border-bottom: 1px solid black"></div>
    <div class="col-md-2"><p>Општина:</p></div>
    <div class="col-md-10"><input value="{{userModel.opstina}}" type="text" class="form-control form-control-sm border-1 border-top-0 border-right-0 border-left-0" style="border-bottom: 1px solid black"></div>
  </div>
  <br>
  </div>

P.S. I tried this jsPDF example, but it simply doesn't work for me

Thanks in advance

score 6 · Accepted Answer · answered Jul 17 '18 at 16:30

6

Try something like this:

Create a button outside of your div

<button (click)="downloadPdf()">Download PDF</button>

When clicked, it will call this function in your component:

downloadPdf() {
    let doc = new jsPDF();
    doc.addHTML(document.getElementById("obrz"), function() {
       doc.save("obrz.pdf");
    });
}

answered Jul 17 '18 at 16:30

birwin

2,524
2
21
41

To use this solution, You have to include [jsPDF](https://github.com/MrRio/jsPDF) library, and also [html2canvas](https://github.com/niklasvh/html2canvas) or [rasterizeHTML](https://github.com/cburgmer/rasterizeHTML.js). – Bishan Nov 26 '18 at 09:27
@SunilGarg I am using [node-html-pdf](https://www.npmjs.com/package/html-pdf) to convert HTML into PDF – Bishan Jun 12 '19 at 11:22

score 3 · Answer 2 · answered Jul 19 '18 at 09:04

JSPDF works for angular 2. You need to download the definitions from dt~. Import the library as:

import * as jsPDF from "jspdf";

let doc = new jsPDF();

// Add a title to your PDF
doc.setFontSize(30); 
doc.text(12, 10, "Your Title");

// Create your table here (The dynamic table needs to be converted to canvas).
let element = <HTMLScriptElement>document.getElementsByClassName("pvtTable") 
 [0];
html2canvas(element)
.then((canvas: any) => {
doc.addImage(canvas.toDataURL("image/jpeg"), "JPEG", 0, 50, 
doc.internal.pageSize.width, element.offsetHeight / 5 );
doc.save(`Report-${Date.now()}.pdf`);
})

In your system.js, in the map section add this line:

"jspdf": "<myLibs>/jspdf.js",

score 1 · Answer 3 · answered Oct 25 '19 at 09:59

Hear Is the working demo For angular 8

Angular 8 Html To Pdf Demo code

For Angular 2 you have to change the component.ts ViewChild code segment

@ViewChild('pdfTable', {static: false}) pdfTable: ElementRef;

to This

 @ViewChild('pdfTable') pdfTable: ElementRef;

Hope This Will Helps...!

Angular 2 - How to export html to pdf?

3 Answers3

Linked