經過前端js將頁面表格導出爲PDF（一）

• 　　前言

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

1、導出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'
    })
});