我正在尝试在由jsPDF创建的pdf中显示先前创建的画布。现有的画布通常但并非总是覆盖pdf中超过一页的高度,因此是for循环的。宽度也溢出了pdf中的可用宽度。
但是,使用下面的代码,它仍然可以看到水平和垂直拉伸。
现有画布的输出形式为:
<画布width =“ 2914.015748031533” height =“ 2644.5” style =“ width:971.339px;高度:881.5px;”>
我一直在反复查看我的代码和drawImage API,但无法找出错误。希望您能提供帮助。
generate = () => {
const availWidthMm = pageWidth - 30
const availHeighMm = 135
const w = origin.width
const h = origin.height
const wMm = px2mm(w)
const hMm = px2mm(h)
pdf.newPage()
pdf.title('Test')
let generatedPartial = null
// Split generated canvas over multiple pages
for (let partialPageNbr = 0; partialPageNbr < Math.ceil(hMm / availHeighMm); partialPageNbr++) {
if (partialPageNbr > 0) {
pdf.newPage()
}
generatedPartial = document.createElement('canvas')
generatedPartial.width = mm2px(availWidthMm)
generatedPartial.height = mm2px(availHeightMm)
document.body.appendChild(generatedPartial )
const generatedPartialCtx = generatedPartial.getContext('2d')
generatedPartialCtx.drawImage(
origin,
0,
partialPageNbr * generatedPartial.height,
generatedPartial.width,
generatedPartial.height,
0,
0,
generatedPartial.width,
generatedPartial.height
)
// Add generated partial to the page
pdf.addImage(generatedPartial.toDataURL('image/png', 1), 'PNG', 15, 45, 267, 130, `generatedPartial${partialPageNbr}`, 'fast')
}
}