我們都知道jsPDF配合html2canvas可以將html轉(zhuǎn)化為canvas铝穷，然后將canvas轉(zhuǎn)為圖片鹦马，最后使用jspdf將圖片放到pdf中去忙干，實現(xiàn)前端的pdf下載辕翰，很方便。但是我們在使用過程中會出現(xiàn)這樣的情況挪丢，將圖片放在一頁蹂风，如果不超過A4紙大小（主要是高度）乾蓬，就沒有問題惠啄，但是高度超過了，我們就必須放多頁，但是放多頁內(nèi)容會被無情截斷撵渡。
我們要實現(xiàn)的目標：不截斷pdf融柬，且內(nèi)容完整
本人經(jīng)過研究jspdf之后，整理了將html轉(zhuǎn)為pdf姥闭，內(nèi)容一頁顯示不截斷的思路和代碼：
思路
- 獲取DOM
- 將DOM轉(zhuǎn)換為canvas
- 獲取canvas的寬度丹鸿、高度（稍微大一點，預覽）
- 將pdf的寬高設(shè)置為canvas的寬高（不適用A4紙大信锲贰）
- 將canvas轉(zhuǎn)為圖片
- 實例化jspdf，將內(nèi)容圖片放在pdf中（因為內(nèi)容寬高和pdf寬高一樣廊敌，就只需要一頁铜跑，也防止內(nèi)容截斷問題）
代碼
document.querySelector('.download button').onclick = function(e) {
var content = document.querySelector('.content')
download(content)
}
function download(content) {
html2canvas(content, {
allowTaint: true,
scale: 2 // 提升畫面質(zhì)量，但是會增加文件大小
}).then(function (canvas) {
/**jspdf將html轉(zhuǎn)為pdf一頁顯示不截斷骡澈，整體思路：
* 1. 獲取DOM
* 2. 將DOM轉(zhuǎn)換為canvas
* 3. 獲取canvas的寬度锅纺、高度（稍微大一點）
* 4. 將pdf的寬高設(shè)置為canvas的寬高
* 5. 將canvas轉(zhuǎn)為圖片
* 6. 實例化jspdf，將內(nèi)容圖片放在pdf中（因為內(nèi)容寬高和pdf寬高一樣肋殴，就只需要一頁囤锉，也防止內(nèi)容截斷問題）
*/
// 得到canvas畫布的單位是px 像素單位
var contentWidth = canvas.width
var contentHeight = canvas.height
console.log('contentWidth', contentWidth)
console.log('contentHeight', contentHeight)
// 將canvas轉(zhuǎn)為base64圖片
var pageData = canvas.toDataURL('image/jpeg', 1.0)
// 設(shè)置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為底部留白
// 設(shè)置內(nèi)容圖片的尺寸护锤，img是pt單位
var imgX = pdfX;
var imgY = (contentHeight / 2 * 0.75); //內(nèi)容圖片這里不需要留白的距離
// 初始化jspdf 第一個參數(shù)方向：默認''時為縱向官地，第二個參數(shù)設(shè)置pdf內(nèi)容圖片使用的長度單位為pt，第三個參數(shù)為PDF的大小烙懦，單位是pt
var PDF = new jsPDF('', 'pt', [pdfX, pdfY])
// 將內(nèi)容圖片添加到pdf中驱入，因為內(nèi)容寬高和pdf寬高一樣，就只需要一頁氯析，位置就是 0,0
PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)
PDF.save('download.pdf')
})
}
頁面如下
圖片下面還有很多內(nèi)容亏较。
image.png
下載效果如下
image.png
總結(jié)
以上就實現(xiàn)了不截斷pdf，一頁顯示所有內(nèi)容掩缓。px是像素單位雪情，pt是印刷單位，兩者之間的關(guān)系和轉(zhuǎn)化你辣，大家可以自行百度巡通。
