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

• 　　前言

　　最近工作太忙了，要同時用django重構兩個系統，前后端都是我一個人寫，前端要設計大量的表單，后端要處理大量的數據，身心俱疲啊！周末都沒空，有半個月沒有寫博客了，今天沒心情加班，騰出時間寫寫這半個月積累的技術經驗。

一、導出pdf

　　因為開發的系統是服務於酒店的，需要定期和酒店對賬，所以要將表格導出為execl表格，這要求簡單，在前端寫寫js代碼就行了；后來又改需求，execl不行，會被人為改動，要導出為pdf，還要每頁加上公司的logo和其他亂七八糟的東西；沒辦法，只能去github上看看有沒有好的第三方插件了，還真讓我給找到了，這就是本文的男主和女主：jspdf和html2canvas；接下來就讓我們運用這兩個庫導出我們想要的PDF報表。

　　首先當然是下載然后引入這兩個js文件了，因為導出pdf的方式是先將我們選擇的DOM包含的內容通過html2canvas渲染為canvas image；然后再通過jspdf將canvas導出為pdf；因為是直接通過瀏覽器完成的，所以有點不是很清晰。

<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

// 獲取本頁表格中最后一行是第幾行（對不同高度的表格進行不同的處理）
var last_counts = $('.counts:last').text();

//監聽pdf導出按鍵
$('#exportpdf').click(function () {
    // 將 id 為 contents 的 div 渲染成 canvas
    html2canvas(document.getElementById("contents"), {
        // 渲染完成時調用，獲得 canvas
        onrendered: function(canvas) {
            // 從 canvas 提取圖片數據
            var imgData = canvas.toDataURL('image/jpeg');
　　　　　　　
　　　　　　 // 因為我要在每頁都加上特定的圖片，所以要先將圖片轉化為base64格式（可以參考這個網站：http://tool.css-js.com/base64.html）
            var img1_base = '~';
            var img2_base = '~';
            var img3_base = '~';

            //初始化pdf，設置相應格式（單位為pt,導出a4紙的大小）
            var doc = new jsPDF("p", "pt", "a4");

            //圖片的位置和尺寸（圖片,left,top,width,high）
            doc.addImage(img1_base, 10, 5, 90, 50);
            doc.addImage(img2_base, 450, 5, 130, 50);

　　　　　　　// 初始導出的頁面為270（根據引入的圖片和每行表格的高度設置）
            var img_high = 270;
            for (var i=1; i<last_counts; i++) {
　　　　　　　　　// 然后每增加一行加20的高（因為我的表格是分頁的，每頁最多26行，所以最高為750）
                img_high += 20
            }
            doc.addImage(imgData, 10, 65, 580, img_high);
　　　　　　　// 頁尾再加上一個圖片
            doc.addImage(img3_base, 450, 780, 120, 40);
            //輸出保存命名為bill的pdf
            doc.save('bill.pdf');
        },
　　　　　// 導出的pdf默認背景顏色為黑色，所以要設置顏色為白（根據自己的需求設置）
        background: '#FFF'
    })
});