PHP － jsPDF+html2canvas實現網頁截圖導出PDF

剛接觸PHP沒多久，跟着大神做項目，遇到一個需求，需要把網頁的部分內容生成PDF文件，領導將這個任務交給了本菜鳥。

PS :本文部分內容轉載自 http://blog.csdn.net/pwc1996/article/details/56675541

1、首先，要先下載兩個庫：

jsPDF: https://github.com/MrRio/jsPDF

html2canvas: https://github.com/niklasvh/html2canvas

2、新建html頁面，頭部引入主要js文件

<script src="/js/jspdf.debug.js"></script>

<script src="/js/html2canvas.js"></script>

<script src="/main.js"></script>

 頁面內容中添加按鈕觸發導出PDF功能

<button id="btn-html2canvas">export PDF </button>

3、編輯main.js

main.js 中的js代碼，是（2）中按鈕點擊執行的代碼

$("#btn-html2canvas").click(function() {
    var p = $(this).data("name");
    // console.log(p);
    var  filename = p + "_fansImages.pdf";
     // 將 id 為 content 的 div 渲染成 canvas
    html2canvas(document.getElementById("content"), {

        // 渲染完成時調用，獲得 canvas
        onrendered: function(canvas) {

            // 從 canvas 提取圖片數據
            var imgData = canvas.toDataURL('image/jpeg');

            var canWidth = canvas.width;
            var canHeight = canvas.height;
            var arrDPI = js_getDPI();//獲取顯示器DPI
            var dpiX = 96;
            var dpiY = 96;
            if(arrDPI.length>0){
                dpiX = arrDPI[0];
                dpiY = arrDPI[1];
            }

            // var doc = new jsPDF("p", "mm", "a4");
            var doc = new jsPDF('', 'in', [(canWidth+10)/dpiX,(canHeight+10)/dpiY]);//設置PDF寬高為要顯示的元素的寬高，將像素轉化為英寸  
            // doc.addImage(imgData, 'JPEG', 0, 0,210,297);
            doc.addImage(imgData, 'JPEG', 0, 0,0,0);

            doc.save(filename);
        },
       background : "#f7f7f7"    //設置PDF背景色（默認透明，實際顯示為黑色）
    });
});


function js_getDPI() {
    var arrDPI = new Array();
    if (window.screen.deviceXDPI != undefined) {
        arrDPI[0] = window.screen.deviceXDPI;
        arrDPI[1] = window.screen.deviceYDPI;
    }
    else {
        var tmpNode = document.createElement("DIV");
        tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
        document.body.appendChild(tmpNode);
        arrDPI[0] = parseInt(tmpNode.offsetWidth);
        arrDPI[1] = parseInt(tmpNode.offsetHeight);
        tmpNode.parentNode.removeChild(tmpNode);
    }
    return arrDPI;
}

這里要特別注意 canvas.toDataURL('image/jpeg)的參數 image/jpeg 和 doc.addImage(...,'JPEG',...) 的參數 JPEG務必一致 
而且，我也建議這兩個參數分別寫 image/jpeg 和 JPEG 。 
因為其他參數例如 image/png 等，導出pdf后內容為空。

4、碎碎念

原博中的main.js太簡單，滿足不了我的導出需求，又花了好多時間研究代碼，尋找方法，大家可以對比原博和本篇，

 var p = $(this).data("name")；//，導出的PDF名稱需要根據需求變化，這行代碼是取出html頁面中傳遞來的字符串

本篇main.js導出的PDF大小與網頁部分大小一致，不會出現網頁部分較大時，內容被壓縮的情況

這個方案的原理是，截取所選div塊內的內容，繪制成圖片，再保存為PDF文件.

附：html2canvas()方法詳細說明

http://www.jianshu.com/p/6a07e974a7e8