js實現html轉pdf+html2canvas.js截圖不全的問題

時間 2019-11-19

標籤實現 html pdf+html2canvas.js pdf canvas 截圖不全問題欄目 JavaScript 简体版

原文原文鏈接

最近作項目中遇到要把整個頁面保存爲PDF文件，網上找了一下實現的方法都是 html2canvas.js+jsPdf.js 來實現。實現的過程是先用html2canvas.js把html頁面轉成圖片，再用jsPdf.js把圖片導出爲pdf。css

因而作了個小案例來測試這個功能。html

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

js寫法jquery

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，結果是沒問題，這樣看來報錯的緣由是圖片引發的。web

一查資料是由於圖片和頁面所在域不一樣，出現跨域傳輸的問題，說白了就是要在服務器環境下訪問。因而在服務器環境下測試沒問題，成功生成pdf文件。canvas

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

把這個測試實現的功能放到項目裏面去，遇到了一個新問題，生成的pdf只有頁面窗口可見的區域，有滾動條的下面沒有生成出來。瀏覽器

因而又找了一下，html2canvas 截取圖片不支持高度，會形成只能夠截到瀏覽器可見的，若是出現滾動條則不會截全，因此形成jsPdf.js根據截圖生成的pdf出現不全的問題。既然是html2canvas截圖的緣由引發的那就從這裏來解決。服務器

網上看了下別人寫的案例，結合本身測試+分析發現，若是截取是body的這個層級，而恰好body設置了overflow: hidden;那超出的部分是永遠截取不到的，由於這個節點的dom高就是窗口可見的高度，並不包含滾動條多出來的部分。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');


                }
            });

        });