angular将html导出为pdf,如何使用Angular进行转换：将HTML转换为PDF

Abhishek Eka..

5

首先安装此软件包

npm安装jspdf

并安装html2canvas包。

npm安装html2canvas

使用import语句将其导入到我们的组件中。

import * as jspdf from 'jspdf';

import html2canvas from 'html2canvas';

在您的TS代码中：

import { Component, OnInit, ElementRef ,ViewChild} from '@angular/core';

import * as jspdf from 'jspdf';

import html2canvas from 'html2canvas';

@Component({

selector: 'app-htmltopdf',

templateUrl: './htmltopdf.component.html',

styleUrls: ['./htmltopdf.component.css']

})

export class HtmltopdfComponent{

public captureScreen()

{

var data = document.getElementById('contentToConvert'); //Id of the table

html2canvas(data).then(canvas => {

// Few necessary setting options

let imgWidth = 208;

let pageHeight = 295;

let imgHeight = canvas.height * imgWidth / canvas.width;

let heightLeft = imgHeight;

const contentDataURL = canvas.toDataURL('image/png')

let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF

let position = 0;

pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)

pdf.save('MYPdf.pdf'); // Generated PDF

});

}

}