我們都知道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)容一頁顯示不截斷的思路和代碼：

思路

1. 獲取DOM
2. 將DOM轉(zhuǎn)換為canvas
3. 獲取canvas的寬度、高度（稍微大一點，預覽）
4. 將pdf的寬高設置為canvas的寬高（不適用A4紙大小）
5. 將canvas轉(zhuǎn)為圖片
6. 實例化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的寬高設置為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)

        // 設置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為底部留白

        // 設置內(nèi)容圖片的尺寸，img是pt單位 
        var imgX = pdfX;
        var imgY = (contentHeight / 2 * 0.75); //內(nèi)容圖片這里不需要留白的距離

        // 初始化jspdf 第一個參數(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)化，大家可以自行百度。