1. 背景
前端直接根据 html 生成 pdf, 减轻后端压力
3. 坑点
**打印位置偏移hack 滚动条 X Y 轴 打印前需要置零**
handleDownloadPDF() {
let scrollTop = document.documentElement.scrollTop
let scrollLeft = document.documentElement.scrollLeft
this.tableOptions.loading = true
API
.xxxxx()
.then((res) => {
document.documentElement.scrollTop = 0
document.documentElement.scrollLeft = 0
this.$refs.html2Pdf.generatePdf()
})
.finally(() => {
document.documentElement.scrollTop = scrollTop
document.documentElement.scrollLeft = scrollLeft
this.tableOptions.loading = false
})
},
分页 -- 通过 css 控制分页位置
.page-break-after {
page-break-after: always;
}
打印宽度 pdf-content-width="'98%'"
v-show="!printState"
ref="html2Pdf"
:enable-download="true"
:filename="fileName"
:float-layout="false"
:html-to-pdf-options="pdfOptions"
:manual-pagination="true"
:paginate-elements-by-height="1400"
:pdf-content-width="'98%'"
:pdf-quality="2"
:preview-modal="false"
:show-layout="false"
pdf-format="a4"
pdf-orientation="landscape"
>
computed: {
fileName() {
return `xxxx`
},
pdfOptions() {
return {
margin: [0, 5, 0, 5],
filename: this.fileName
}
},
},