` async handlePreview() {
const pdf = await this.exportToPdf()
// 使用浏览器预览 PDF-安全策略有缺陷
const pdfDataURI = pdf.output('datauristring')
window.open(pdfDataURI, '_blank','location=no');
},
async handleDown() {
const pdf = await this.exportToPdf()
// 下载 PDF
console.log('pdf', pdf)
pdf.save('申请单.pdf')
},
exportToPdf() {
const element = document.getElementsByClassName('dialog-box')[0] // 你想要导出为 PDF 的元素
console.log('element', element)
const options = {
scale: 1, // 提高分辨率
useCORS: true, // 允许跨域请求
}
return new Promise((resolve, reject) => {
html2canvas(element, options).then((canvas) => {
const contentWidth = canvas.width
const contentHeight = canvas.height
// 一页 PDF 显示 HTML 页面生成的 canvas 高度;
const pageHeight = (contentWidth / 592.28) * 841.89
// 未生成 PDF 的 HTML 页面高度
let leftHeight = contentHeight
// 页面偏移
let position = 0
// a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
const imgWidth = 595.28
const imgHeight = (592.28 / contentWidth) * contentHeight
const pageData = canvas.toDataURL('image/jpeg', 1.0)
const pdf = new jsPDF('', 'pt', 'a4')
// 设置边距
// pdf.setMargins(15, 15, 15, 15)
// 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
// 当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
// 分页
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
// 避免添加空白页
if (leftHeight > 0) {
pdf.addPage()
}
}
}
// return pdf
resolve(pdf)
})
}).catch((error) => {
console.log('error', error)
// reject(error)
})
},`
标签:jspdf,canvas,const,html2canvas,vue2,PDF,leftHeight,pdf,页面
From: https://www.cnblogs.com/33shan/p/18394669