js導出PDF

一、引用兩個js庫

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

二、實現導出PDF

/**
     * 導出PDF
     * @param id
     */
    exportPdf:function (id,filename,leftHeight) {
        html2canvas(
            document.getElementById(id), {
                dpi: 172, //導出pdf清晰度
                onrendered: function(canvas) {
                    var contentWidth = canvas.width;
                    var contentHeight = canvas.height;
                    //一頁pdf顯示html頁面生成的canvas高度;
                    var pageHeight = contentWidth / 592.28 * 841.89;
                    //pdf頁面偏移
                    var position = 0;
                    //html頁面生成的canvas在pdf中圖片的寬高（a4紙的尺寸[595.28,841.89]）
                    var imgWidth = 595.28;
                    var imgHeight = 592.28 / contentWidth * contentHeight;
                    var pageData = canvas.toDataURL('image/jpeg', 1.0);
                    var pdf = new jsPDF('', 'pt', 'a4');

                    //當內容未超過pdf一頁顯示的范圍，無需分頁
                    if(leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                    } else {
                        while(leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                            leftHeight -= pageHeight;
                            position += 841.89;
                            if(leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }
                    pdf.save(filename+'.pdf');
                },
                background: "#fff"
            })

三、解決div有滾動條，導出不了所有內容的問題

在 html2canvas方法前加入復制添加被導出dom的代碼

 var copyDom = $("<div id='super'></div>");
 copyDom.width(content.width() + "px");
 copyDom.height(content.height() + "px");
 $('body').append(copyDom);

在實現導出后刪除添加的元素

$('#super').remove();

四、解決導出的PDF分頁造成內容截斷的問題，導出一張PDF

注意：導出的時候不能滾動滾動條，否則上面的內容獲取不到

if(nopage != undefined){ // 不分頁
                    // 設置pdf的尺寸，pdf要使用pt單位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
                    var pdfX = (contentWidth + 10) * 0.75;
                    var pdfY = (contentHeight + 20) * 0.75; // 10為底部留白

                    // 設置內容圖片的尺寸，img是pt單位
                    var imgX = pdfX;
                    var imgY = (contentHeight * 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(fileName+'.'+fileType);
                }

 五、解決滑動了滾動條，導出內容不全

原因：當向下滑動滾動條時，子元素超出的內容被隱藏，此時截取圖片是以可視窗口上面的坐標開始截取的。

實現思路是把div和頁面的滾動條都移動到最上面即可

$("#produceDialog div:first").scrollTop(0);//移動div滾動條
window.scrollTo(0,0);//移動頁面滾動條

在此期間碰到另外一個問題，設置div的scrollTop屬性不生效，原因：

①：容器設置了overflow:hidden，超出內容被隱藏，需要設置成 auto 或 scroll

②：設置scrollTop的div元素不對，不是有滾動條的那個元素自然不生效。需滿足前置條件：子級的div元素大於父級元素，父級元素overflow != hidden才會出現滾動條。設置的元素是直接父級元素，不是祖級