html轉(zhuǎn)化成pdf內(nèi)容被分割怎么解決？

解決思路

1、獲取DOM

2、將DOM轉(zhuǎn)換為canvas

3、獲取canvas的寬度、高度（稍微大一點，預(yù)覽）

4、將PDF的寬高設(shè)置為canvas的寬高（不適用A4紙大小）

5、將canvas轉(zhuǎn)為圖片

5、實例化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')

})