import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
....
exportPdf() {
this.$nextTick(() => {
const element = document.getElementById('pdf-dom') // 要打印的区域
html2canvas(element, { logging: false, useCORS: true }).then(function(canvas) {
console.log(canvas)
let pdf = new JsPDF('p', 'mm', 'a4') // A4纸,纵向
console.log(pdf)
let ctx = canvas.getContext('2d')
let a4w = 190
let a4h = 267 // a4大小,216mmx297m 各保留10mm的边距,上下15m,显示区190x257
let imgHeight = Math.floor((a4h * canvas.width) / a4w)
let renderedHeight = 0
let logo = document.getElementById('pdf-logo')
while (renderedHeight < canvas.height) {
let page = document.createElement('canvas')
page.width = canvas.width
page.height = Math.min(imgHeight, canvas.height - renderedHeight)
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,
15,
a4w,
Math.min(a4h, (a4w * page.height) / page.width)
)
pdf.addImage(logo, 'PNG', 10, 3) // 页眉
renderedHeight += imgHeight
if (renderedHeight < canvas.height) pdf.addPage()
}
pdf.save('test.pdf')
})
})
},
....