/**
* element 需要下載的dom節(jié)點（傳dom節(jié)點的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 參數(shù)可參考文檔
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')
}
)
}
}
// 調(diào)用
downloadPdf('#domNode', '下載pdf')
遇到問題：
- 截取的圖片沒有超出滾動的部分
問題： 需要下載的dom元素節(jié)點設(shè)置了固定高度并且設(shè)置了overflow: hidden
解決： 需要下載的dom元素不設(shè)置固定高度列吼，讓它讓內(nèi)部的內(nèi)容撐起高度
