前端:ant design vue 1.6.2
JSPDF版本:2.3.0
需求:在搭配html2canvas截取页面div中内容作为图片,导出 PDF过程中,怎样让截取的图片能够在PDF页面居中显示?现在是顶在左上角
已解决
downloadPDF() {
const downPdf = document.getElementById('KPImounth')
html2canvas(downPdf).then((canvas) => {
const image = canvas.toDataURL('image/jpeg', 1.0)
const doc = new jsPDF('l', 'px', 'a4')
const pageWidth = doc.internal.pageSize.getWidth()
const pageHeight = doc.internal.pageSize.getHeight()
const widthRatio = pageWidth / canvas.width
const heightRatio = pageHeight / canvas.height
const ratio = widthRatio > heightRatio ? heightRatio : widthRatio
const canvasWidth = canvas.width * ratio
const canvasHeight = canvas.height * ratio
const marginX = (pageWidth - canvasWidth) / 2
const marginY = (pageHeight - canvasHeight) / 2
doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight)
doc.output('dataurlnewwindow')
doc.save('pdfname' + '.pdf')
})
},
是用 JsPDF 来生成pdf的吗
addImage 是可以指定位置的