通過前端js將頁面表格導出為PDF（二）

　　前面我說道了，將頁面的表格導出為pdf，通過我給出的代碼完好的實現了其需求，但是沒過幾天，又說不行了，因為我的表格是按照最多26行就進行分頁，如果表格行數一多，就要點擊下一頁再進行pdf的導出，因為是面向客戶的，所以要盡量減少用戶的操作，因此要改成，一鍵導出所有的表格，然后自動分頁，每頁再加上特定的圖片。我就日了@#@#@！這是。。。。，沒辦法，改唄，前前后后折騰了兩天，終於讓我給整出來了，不容易啊！真的的是有需求才有動力啊！

　　先說一下我的方式：首先還是按照正常的進行分頁顯示，當點擊導出pdf按鈕時，跳轉到另一個頁面，在這個頁面表格不進行分頁，而是完全的顯示在一頁，然后渲染再pdf導出，通過cavase的錯位，使用空白的圖片，覆蓋住多余的表格，然后依次下去，直到所有的都移動完，這樣就可以多頁導出了。就好像下圖一樣的原理

　　首先還是老樣子，引入文件

<script src="add/pdf/jquery.js"></script>
<script src="add/pdf/jspdf.debug.js"></script>
<script src="add/pdf/html2canvas.min.js"></script>
<script src="add/pdf/exportpdf.js"></script>

exportpdf.js

$('#exportpdf').click(function () {
    html2canvas(document.getElementById("contents"), {
        onrendered: function(canvas) {
            // 頁面生成的canvas高
            var contentHeight = canvas.height;

            //未生成pdf的html頁面高度
            var allHeight = contentHeight;

            //pdf頁面頭偏移距離(偏移量)
            var position = 60;

            //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
            var imgWidth = 595;

            var imgData = canvas.toDataURL('image/jpeg');

　　　　　　　var img1_base = '~';
　　　　　　　var img2_base = '~';
　　　　　　　var img3_base = '~';
　　　　　　　var img4_base = '~';
　　　　　　　var img5_base = '~';

            //初始化pdf，設置相應格式
            var doc = new jsPDF("p", "pt", "a4");
            var p = 1,
                i = 1.5,
                z = Math.ceil(last_counts/26);
　　　　　　　
　　　　　　　// 如果高度小於一頁就
            if (allHeight < 1100) {
                // 頁面表單
                doc.addImage(imgData, 0, position, imgWidth, contentHeight/i);
                // 一張空白圖片（將超過的覆蓋）
                doc.addImage(img4_base, 0, 0, 600, 110);
                // 公司logo
                doc.addImage(img1_base, 10, 5, 90, 50);
                doc.addImage(img2_base, 450, 5, 130, 50);
                // 空白圖片（將不需要的覆蓋）
                doc.addImage(img4_base, 0, 760, 600, 200);
                doc.addImage(img3_base, 450, 780, 120, 40);

                // 訂單總計圖片
                doc.addImage(img5_base, 0, 68, 600, 25);
　　　　　　　　　// 文字（因為jspdf不支持中文，所以先將要用的中文制作成圖片使用）
                doc.setFontSize(10);
                doc.text(8, 85, start_time);
                doc.text(75, 85, end_time);
                doc.text(160, 85, String(last_counts));
                doc.text(268, 85, String(total_price));
                doc.text(508, 85, String(lists[p]));

                doc.text(290, 820, String(p));
            } else {
                // 如果大於一頁
                if (z > 0) {
                    // 頁面表單
                    doc.addImage(imgData, 0, position, imgWidth, contentHeight/i);
                    // 空白圖片
                    doc.addImage(img4_base, 0, 0, 600, 110);
                    // 公司logo
                    doc.addImage(img1_base, 10, 5, 90, 50);
                    doc.addImage(img2_base, 450, 5, 130, 50);
                    // 空白圖片
                    doc.addImage(img4_base, 0, 760, 600, 200);
                    doc.addImage(img3_base, 450, 780, 120, 40);

                    // 訂單總計圖片
                    doc.addImage(img5_base, 0, 68, 600, 25);
                    doc.setFontSize(10);
                    doc.text(8, 85, start_time);
                    doc.text(75, 85, end_time);
                    doc.text(160, 85, String(last_counts));
                    doc.text(268, 85, String(total_price));
                    doc.text(508, 85, String(lists[p]));

                    doc.text(290, 820, String(p));
　　　　　　　　　　　　// 每導出一頁就進行相應的偏移
                    position -= 624;
                    z -= 1;
                    while (z > 0) {
                        doc.addPage('a4', 'pt');
                        // 頁面表單
                        doc.addImage(imgData, 0, position, imgWidth, contentHeight/i);
                        // 空白圖片
                        doc.addImage(img4_base, 0, 0, 600, 130);
                        // 表頭
                        doc.addImage(img6_base, 5, 113, 586, 24);
                        // 公司logo
                        doc.addImage(img1_base, 10, 5, 90, 50);
                        doc.addImage(img2_base, 450, 5, 130, 50);
                        doc.addImage(img4_base, 0, 760, 600, 200);
                        doc.addImage(img3_base, 450, 780, 120, 40);

                        // 訂單總計圖片
                        doc.addImage(img5_base, 0, 68, 600, 25);
                        doc.setFontSize(10);
                        doc.text(8, 85, start_time);
                        doc.text(75, 85, end_time);
                        doc.text(160, 85, String(last_counts));
                        doc.text(268, 85, String(total_price));
                        p += 1;
                        doc.text(508, 85, String(lists[p]));

                        doc.text(300, 820, String(p));
                        // allHeight -= 1000;
                        position -= 624;
                        z -= 1;
                    }
                }
            }
            doc.save('bill.pdf');
        },
        background: '#FFF'
    })
 });