【jsPDF】jsPDF插件實現將html頁面轉換成PDF，並下載，支持分頁

1、目的：在前段是 jQuery庫 或者 VUE庫 或者兩者混合庫，將html 頁面和數據 轉換成PDF格式並下載，支持分頁

1、項目背景：
對客戶報修記錄進行分類統計，並生成各種餅圖、柱狀圖、線性圖。並要求導出word，並打印。html里面內容是通過js刷新出來的，是動態的數據。

2、項目難點：
1）html導出到word，不太可能，頁面比較復雜，內容比較多，而且word不支持。
2）html頁面存在多個 echart圖表，根本無法導出。

3、折中方案
采用jspdf插件，將html頁面導出成pdf，在打印pdf。 效果不是特別理想，但是還過的去。


4、具體操作
1）下載jspdf插件，官網有。
2）html頁面引用兩個js文件 jspdf.debug.js  和 html2canvas.js  （利用該插件將html頁面轉化成圖片，在插入到pdf中）
3）編寫一個js方法 即可實現 轉化pdf。並可以指定導出區域。

 

2、引入類庫包：

<!-- .pdf文件下載  download -->
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
<!-- jQuery 2.2.3 -->
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>

3、需要下載頁面內容，假設在一個DIV里面（vue2.0示例）：

<div class="right-aside" id="pdfDom" class="right-aside">
        
        <section class="content-header">
            @yield('search')
        </section>
        <section class="content">
            @yield('content')
        </section>
        <i-col span="8">
            <i-button type="warning" @click="makeMpdf()">導出PDF文件</i-button>
        </i-col>
</div>
<script type="text/javascript">
function makeMpdf () {
    if(confirm("您確認下載該PDF文件嗎?")){
       var pdf = new jsPDF('p','pt','a4');
    // 設置打印比例 越大打印越小
       pdf.internal.scaleFactor = 2;
       var options = {
           pagesplit: true, //設置是否自動分頁
          "background": '#FFFFFF'   //如果導出的pdf為黑色背景，需要將導出的html模塊內容背景 設置成白色。
      };
       var printHtml = $('#pdfDom').get(0);   // 頁面某一個div里面的內容，通過id獲取div內容
       pdf.addHTML(printHtml,15, 15, options,function() {
          pdf.save('目標.pdf');
      });
    }
}

</script>

 

4、或者上面的JS方法可以替換成這個也是可以的。

//將html頁面導出.pdf格式文件(適用於jQuery、vue庫)  -- xzz 2018/04/24
function makeMpdf(pdfName) {
  if(confirm("您確認下載該PDF文件嗎?")){
    var target = document.getElementsByClassName("right-aside")[0];
    target.style.background = "#FFFFFF";
    if(pdfName==''||pdfName==undefined) pdfName= getNowFormatDate();
    
    html2canvas(target, {
        onrendered:function(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 = 595.28;
            var imgHeight = 592.28/contentWidth * contentHeight;

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

            var pdf = new jsPDF('', 'pt', 'a4');

            //有兩個高度需要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
            //當內容未超過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(pdfName+".pdf");
        }
      })
  }
}

5、效果：