vue2.0 导出PDF 并适配 A4纸张的思路

npm install --save jspdf
npm install --save html2canvas;
npm install vue-router@3

 

 

import html2canvas from 'html2canvas'
import { jsPDF } from 'jspdf'

async handleUploadHTMLPDF() {
try {
this.loading.print = true
const dom: any = document.querySelector('#printContent')
const query = this.$route.query
const id = query?.id
if (dom) {
html2canvas(dom).then(async canvas => {
let pdf = new jsPDF('p', 'mm', 'a4') // A4纸，纵向
let ctx: any = canvas.getContext('2d')
let a4w = 190
let a4h = 277 // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
let imgHeight = Math.floor((a4h * canvas.width) / a4w) // 按A4显示比例换算一页图像的像素高度
let renderedHeight = 0
while (renderedHeight < canvas.height) {
let page: any = document.createElement('canvas')
page.width = canvas.width
page.height = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页
// 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
page.getContext('2d').putImageData(
ctx.getImageData(
0,
renderedHeight,
canvas.width,
Math.min(imgHeight, canvas.height - renderedHeight)
),
0,
0
)
pdf.addImage(
page.toDataURL('image/jpeg', 1.0),
'JPEG',
10,
10,
a4w,
Math.min(a4h, (a4w * page.height) / page.width)
) // 添加图像到页面，保留10mm边距

renderedHeight += imgHeight
if (renderedHeight < canvas.height) {
pdf.addPage() // 如果后面还有内容，添加一个空页
}
// delete page;
}
// 保存文件
pdf.save('output.pdf')
const blob = pdf.output('blob')
const base64 = await this.blobToBase64(blob)
// 之后想传给后端 blob 或者 base64 随便你
})
}
} catch (err) {
console.log(err)
}
}
blobToBase64 = (blob: Blob): Promise<string> => {
return new Promise(resolve => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result as string)
reader.readAsDataURL(blob)
})
}