在 Angular 中将 HTML 转换为 PDF 时如何格式化 PDF
How to format PDF when converting HTML to PDF in Angular
我正在尝试使用 jspdf 和 html2canvas 在 angular 中将 HTML 转换为 PDF。问题是我没有直接的方法来避免 PDF 中不需要的 HTML 元素。
HTML代码
<button (click)="ConvertToHtml()">Generate PDF</button>
<div id="MainSegment">
<div id="Div1">
test 1
</div>
<div id="Unwanted">
Unwanted stuff
</div>
<div id="Div2">
test 2
</div>
</div>
Angular代码
import { Component, VERSION } from '@angular/core';
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ConvertToHtml() {
var data = document.getElementById('MainSegment');
html2canvas(data).then(canvas => {
var imgWidth = 208;
var imgHeight = (canvas.height * imgWidth) / canvas.width;
const contentDataURL = canvas.toDataURL('image/png');
let pdf = new jspdf('p', 'mm', 'a4');
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
pdf.save('sample.pdf');
});
}
}
在这里,我试图避免 id="Unwanted"
元素。
我可能会隐藏(display:none
)元素并在执行 ConvertToHtml()
方法后再次显示它,但我想知道是否有办法只获取 #Div1
和 #Div2
元素并仅将这些元素转换为 PDF。
您只需要添加以忽略您不想格式化为 PDF 的部分:
data-html2canvas-ignore="true"
例如:
<div id="Unwanted" data-html2canvas-ignore="true">
我正在尝试使用 jspdf 和 html2canvas 在 angular 中将 HTML 转换为 PDF。问题是我没有直接的方法来避免 PDF 中不需要的 HTML 元素。
HTML代码
<button (click)="ConvertToHtml()">Generate PDF</button>
<div id="MainSegment">
<div id="Div1">
test 1
</div>
<div id="Unwanted">
Unwanted stuff
</div>
<div id="Div2">
test 2
</div>
</div>
Angular代码
import { Component, VERSION } from '@angular/core';
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ConvertToHtml() {
var data = document.getElementById('MainSegment');
html2canvas(data).then(canvas => {
var imgWidth = 208;
var imgHeight = (canvas.height * imgWidth) / canvas.width;
const contentDataURL = canvas.toDataURL('image/png');
let pdf = new jspdf('p', 'mm', 'a4');
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
pdf.save('sample.pdf');
});
}
}
在这里,我试图避免 id="Unwanted"
元素。
我可能会隐藏(display:none
)元素并在执行 ConvertToHtml()
方法后再次显示它,但我想知道是否有办法只获取 #Div1
和 #Div2
元素并仅将这些元素转换为 PDF。
您只需要添加以忽略您不想格式化为 PDF 的部分:
data-html2canvas-ignore="true"
例如:
<div id="Unwanted" data-html2canvas-ignore="true">