/**
* element 需要下载的dom节点(传dom节点的id)
* pdfTitle 下载到本地pdf文件的文件名
*/
const downloadPdf = (element, pdfTitle) => {
const el = document.querySelector(element)
html2Canvas(el, {
allowTaint: true,
tainTest: false
}).then(function (canvas) {
const contentWidth = canvas.width
const contentHeight = canvas.height
// 592.28 A4 纸的宽度
// 841.89 A4纸的长度
const pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
const imgWidth = 595.28
const imgHeight = 592.28 / contentWidth * contentHeight
const pageData = canvas.toDataURL('image/jpeg', 1.0)
// PDF 参数可参考文档
const PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
// 如果页面长度超出a4 的长度, 就分页
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(pdfTitle + '.pdf')
}
)
}
}
// 调用
downloadPdf('#domNode', '下载pdf')
遇到问题:
- 截取的图片没有超出滚动的部分
问题: 需要下载的dom元素节点设置了固定高度并且设置了overflow: hidden
解决: 需要下载的dom元素不设置固定高度,让它让内部的内容撑起高度