vue html pdf,Vue-html2pdf Html 生成 pdf 【踩坑实记】

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

}

},

},