jsPDF 導出html為pdf內容截斷

思路

1. 獲取DOM
2. 將DOM轉換為canvas
3. 獲取canvas的寬度、高度（稍微大一點，預覽）
4. 將pdf的寬高設置為canvas的寬高（不適用A4紙大小）
5. 將canvas轉為圖片
6. 實例化jspdf，將內容圖片放在pdf中（因為內容寬高和pdf寬高一樣，就只需要一頁，也防止內容截斷問題）

代碼

    document.querySelector('.download button').onclick = function(e) { var content = document.querySelector('.content') download(content) } function download(content) { html2canvas(content, { allowTaint: true, scale: 2 // 提升畫面質量，但是會增加文件大小 }).then(function (canvas) { /**jspdf將html轉為pdf一頁顯示不截斷，整體思路： * 1. 獲取DOM * 2. 將DOM轉換為canvas * 3. 獲取canvas的寬度、高度（稍微大一點） * 4. 將pdf的寬高設置為canvas的寬高 * 5. 將canvas轉為圖片 * 6. 實例化jspdf，將內容圖片放在pdf中（因為內容寬高和pdf寬高一樣，就只需要一頁，也防止內容截斷問題） */ // 得到canvas畫布的單位是px 像素單位 var contentWidth = canvas.width var contentHeight = canvas.height console.log('contentWidth', contentWidth) console.log('contentHeight', contentHeight) // 將canvas轉為base64圖片 var pageData = canvas.toDataURL('image/jpeg', 1.0) // 設置pdf的尺寸，pdf要使用pt單位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75 // 2為上面的scale 縮放了2倍 var pdfX = (contentWidth + 10) / 2 * 0.75 var pdfY = (contentHeight + 500) / 2 * 0.75 // 500為底部留白 // 設置內容圖片的尺寸，img是pt單位 var imgX = pdfX; var imgY = (contentHeight / 2 * 0.75); //內容圖片這里不需要留白的距離 // 初始化jspdf 第一個參數方向：默認''時為縱向，第二個參數設置pdf內容圖片使用的長度單位為pt，第三個參數為PDF的大小，單位是pt var PDF = new jsPDF('', 'pt', [pdfX, pdfY]) // 將內容圖片添加到pdf中，因為內容寬高和pdf寬高一樣，就只需要一頁，位置就是 0,0 PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY) PDF.save('download.pdf') }) }