用js實作html轉pdf

php中世界最好的语言原創: 2018-03-20 09:55:063417瀏覽

這次帶給大家用js實作html轉pdf，用js實作html轉pdf的注意事項有哪些，下面就是實戰案例，一起來看一下。

於是做了個小案例來測試這個功能。

<body>
    <!-- PDF -->
    <p class="bb" id="ctn">
        <p class="anliu" id="anliu">生成PDF</p>
  
    </p></body><script src="../../Scripts/aps/html2canvas.js"></script><script src="../../Scripts/aps/jsPdf.debug.js"></script>

js寫法

window.onload =function(){var downPdf = document.getElementById("anliu");
downPdf.onclick = function() {
   html2canvas(document.body, {
        onrendered: function(canvas) {                //返回图片URL，参数：图片格式和清晰度(0-1)
                  var pageData = canvas.toDataURL('image/jpeg', 1.0);                  //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
                  var pdf = new jsPDF('', 'pt', 'a4');                  //需要dataUrl格式
                  pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
                  pdf.save('tup.pdf');
            
        }
    });
}
}

1，寫完一測試看，報了個錯誤Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported。於是我換一種方法，把所有圖片刪掉測試，再點擊生成pdf，結果是沒問題，這樣看來報錯的原因是圖片引起的。

一查資料是因為圖片和頁面所在網域不同，出現跨網域傳輸的問題，說白了就是要在伺服器環境下存取。於是在伺服器環境下測試沒問題，成功產生pdf檔。

2，html2canvas.js截圖不全的問題

#把這個測試實作的功能放到專案裡面去，遇到了一個新問題，產生的pdf只有頁面視窗可見的區域，有捲軸的下面沒有產生出來。

於是又找了一下，html2canvas 截取圖片不支援高度，會造成只可以截到瀏覽器可見的，如果出現捲軸則不會截取，所以造成jsPdf.js根據截圖產生的pdf出現不全的問題。既然是html2canvas截圖的原因引起的那就從這裡來解決。

網路上看了別人寫的案例，結合自己測試+分析發現，如果截取是body的這個層級，而剛好body設定了overflow: hidden;那超出的部分是永遠截取不到的，因為這個節點的dom高就是視窗可見的高度，不包含滾動條多出來的部分。

於是我把滾動條這一節點的樣式，height: auto;讓高度給子元素去撐開。再往上把父節點都去掉overflow: hidden;去掉元素不可見。

看一下引入jquery後，在專案中重新寫的js

        var pdfcc = $('.pdf-cc');
        pdfcc.on('click', function (event) {
            html2canvas($("#bb-pdf-ctn"), {
                allowTaint: true,
                height: $("#bb-pdf-ctn").outerHeight(),
                onrendered: function (canvas) {                    //返回图片URL，参数：图片格式和清晰度(0-1)
                    var pageData = canvas.toDataURL('image/jpeg', 1.0);                    //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
                    var pdf = new jsPDF('', 'pt', 'a4');                    //需要dataUrl格式
                    pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);
                    pdf.save('pdf.pdf');
                }
            });
        });

3，html2canvas設定了2個新的參數

#允許跨域：allowTaint: true,

設定高度：height: $("#bb-pdf-ctn").outerHeight(),

高度就是滾動條這個節點的高度。

OK，就這樣搞定滾動條區域截圖不全的問題了。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！