解決思路

1、獲取DOM

2、將DOM轉換為canvas

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

4、將pdf的寬高設定為canvas的寬高（不適用A4紙大小）

5、將canvas轉為圖片

5、例項化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")

})