使用JS網頁內容保存為PDF

一、使用插件

1.html2canvas.js

script引入：

2.jspdf.js

script引入：

二、編寫HTML文件

<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/html2canvas.js"></script>
<script src="./js/jspdf.js"></script>
<script src="./js/exportpdf.js"></script>

<div>
    <span id="download">下載</span>
</div>
<div class="data-table" id="download-table">
   <table class="table table-hover">
      <thead>
         <tr>
            <td>項目員</td>
            <td>任務分值</td>
            <td>日志分值</td>
            <td>績效分值</td>
            <td>績效額度</td>
         </tr>
      </thead>
   </table>
</div>

三、編寫js文件

文件名稱：exportpdf.js

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

//監聽pdf導出按鍵

$('#download').click(function () {

    // 將 id 為 contents 的 div 渲染成 canvas
    html2canvas(document.getElementById("download-table"),{
        // 渲染完成時調用，獲得 canvas
        onrendered: function(canvas) {

            // 從 canvas 提取圖片數據
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;

            //一頁pdf顯示html頁面生成的canvas高度;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html頁面高度
            var leftHeight = contentHeight;
            //頁面偏移
            var position = 0;
            //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
            var imgWidth = 555.28;
            var imgHeight = 555.28/contentWidth * contentHeight;

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

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

            if (leftHeight < pageHeight) {
                doc.addImage(imgData, 'JPEG', 20, 20, imgWidth, imgHeight );
            } else {
                while(leftHeight > 0) {
                    doc.addImage(imgData, 'JPEG', 20, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //避免添加空白頁
                    if(leftHeight > 0) {
                        doc.addPage();
                    }
                }
            }

            //輸出保存命名為bill的pdf
            doc.save('bill.pdf');
        },
        // 導出的pdf默認背景顏色為黑色，所以要設置顏色為白（根據自己的需求設置）
        background: '#FFF'
    })
});