Breaking News: Grepper is joining You.com. Read the official announcement!

html to pdf angular

MitchAloha answered on January 18, 2022 Popularity 10/10 Helpfulness 4/10

answer html to pdf angular

related jspdf html to pdf angular 8

html to pdf angular

Comment

npm install --save pdfmake
npm install html-to-pdfmake
npm install jspdf --save

ts file:
import jsPDF from 'jspdf';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
import htmlToPdfmake from 'html-to-pdfmake';

...
@ViewChild('pdfTable') pdfTable: ElementRef;
  
  public downloadAsPDF() {
    const doc = new jsPDF();
   
    const pdfTable = this.pdfTable.nativeElement;
   
    var html = htmlToPdfmake(pdfTable.innerHTML);
     
    const documentDefinition = { content: html };
    pdfMake.createPdf(documentDefinition).open(); 
    
    
HTML file:
<div class="container">
  <div id="pdfTable" #pdfTable>
...
</div>
  <button class="btn btn-primary" (click)="downloadAsPDF()">Export To PDF</button>
</div>

Popularity 10/10 Helpfulness 4/10 Language html

Source: www.itsolutionstuff.com

Tags: angular html html-to-pdf

Link to this answer
Share Copy Link

Contributed on Jan 18 2022

MitchAloha

0 Answers Avg Quality 2/10

Closely Related Answers

jspdf html to pdf angular 8

Comment

import { Component } from '@angular/core';
import { jsPDF } from "jspdf";
import html2canvas from 'html2canvas';
 
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'html-to-pdf-angular-application';
public convertToPDF()
{
html2canvas(document.body).then(canvas => {
// Few necessary setting options
 
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jsPDF('p', 'mm', 'a4'); // A4 size page of PDF
var width = pdf.internal.pageSize.getWidth();
var height = canvas.height * width / canvas.width;
pdf.addImage(contentDataURL, 'PNG', 0, 0, width, height)
pdf.save('output.pdf'); // Generated PDF
});
}
}

Popularity 9/10 Helpfulness 4/10 Language html

Source: Grepper

Tags: angular

Link to this answer
Share Copy Link

Contributed on May 13 2022

HandsomeOldGod5355

0 Answers Avg Quality 2/10

html to pdf angular

Contents

More Related Answers

html to pdf angular

Closely Related Answers

jspdf html to pdf angular 8

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.