如何将 Angular: HTML 转换为 PDF
How do I convert with Angular: HTML into PDF
我正在使用 Angular,我想将 table 从 html 转换为 pdf,这是我在 component.ts 中的代码:
downloadPDF() {
const doc = new jsPDF();
const specialElememtHandlers = {
'#editor'(element, renderer) {
return true;
}
};
doc.fromHTML(this.content.nativeElement.innerHTML, 15, 15, {
width: 190,
elementHandlers: specialElememtHandlers
});
doc.save('test.pdf');
}
我的 html 代码是:
<button (click)="downloadPDF()">Save as PDF</button>
我居然可以下载一个pdf,但是完全白了
您可以使用库 'PrintJS' 将 html 模板转换为 pdf。
https://printjs.crabbly.com/
首先安装这个包
npm install jspdf
并安装 html2canvas 包。
npm install 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
});
}
}
希望这会有所帮助
首先安装这个包
npm install jspdf
npm install html2canvas@1.0.0-alpha.12 //working with this html2canvas version.
使用 import 语句(app.component.ts)将其导入到我们的组件中。
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';
添加app.component.html
<div class="abc" id="content">
<h1>Hello World!</h1>
<button (click)="Screen()">make pdf</button>
</div>
添加app.component.ts
Screen()
{
var data = document.getElementById('content');
html2canvas(data).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
});
}
我正在使用 Angular,我想将 table 从 html 转换为 pdf,这是我在 component.ts 中的代码:
downloadPDF() {
const doc = new jsPDF();
const specialElememtHandlers = {
'#editor'(element, renderer) {
return true;
}
};
doc.fromHTML(this.content.nativeElement.innerHTML, 15, 15, {
width: 190,
elementHandlers: specialElememtHandlers
});
doc.save('test.pdf');
}
我的 html 代码是:
<button (click)="downloadPDF()">Save as PDF</button>
我居然可以下载一个pdf,但是完全白了
您可以使用库 'PrintJS' 将 html 模板转换为 pdf。 https://printjs.crabbly.com/
首先安装这个包
npm install jspdf
并安装 html2canvas 包。
npm install 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
});
}
}
希望这会有所帮助
首先安装这个包
npm install jspdf
npm install html2canvas@1.0.0-alpha.12 //working with this html2canvas version.
使用 import 语句(app.component.ts)将其导入到我们的组件中。
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';
添加app.component.html
<div class="abc" id="content">
<h1>Hello World!</h1>
<button (click)="Screen()">make pdf</button>
</div>
添加app.component.ts
Screen()
{
var data = document.getElementById('content');
html2canvas(data).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
});
}