jsPDF 導出html爲pdf內容截斷終極解決方案

咱們都知道jsPDF配合html2canvas能夠將html轉化爲canvas，而後將canvas轉爲圖片，最後使用jspdf將圖片放到pdf中去，實現前端的pdf下載，很方便。可是咱們在使用過程當中會出現這樣的狀況，將圖片放在一頁，若是不超過A4紙大小（主要是高度），就沒有問題，可是高度超過了，咱們就必須放多頁，可是放多頁內容會被無情截斷。

咱們要實現的目標：不截斷pdf，且內容完整

本人通過研究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')
      })
    }複製代碼