ReactJS中加入jspdf

• 背景
• 版本
• 步驟
• • 1.下載下傳jspdf
  • 2.導入jspdf和html2canvas
  • 3.調用.html()方法
  • 4.相關問題
  • • 4.1 出現找不到html2canvas的問題？
    • 4.2 尺寸不容易控制？

背景

客戶需要在前端将html轉成pdf的功能，使用jspdf這個插件

版本

ReactJs 16.8.6

步驟

1.下載下傳jspdf

npm install --save jspdf 
           

2.導入jspdf和html2canvas

import * as jsPDF from 'jspdf';
import * as html2canvas from 'jspdf/node_modules/html2canvas'
window.html2canvas = html2canvas;//這裡記得将html2canvas設為全局，不然後面找不到
           

3.調用.html()方法

let pdf = new jsPDF('p','pt','a4');//建立一個豎向，機關為pt，大小為a4的頁面
        let printDoc = document.createElement("div");//建立dom元素（使用已有的也行）
        let docTitle = document.createElement("div");//标題
        let docDetail = document.createElement("div");//内容
        docTitle.innerHTML=item.Title;
        docDetail.innerHTML=item.Detail;
        printDoc.setAttribute('style','font-family:Arial, Helvetica, sans-serif;width:1000px;padding:40px');//屬性設定
        docTitle.setAttribute('style','font-size:30px');//屬性設定
        docDetail.setAttribute('style','font-size:20px');//屬性設定
        printDoc.appendChild(docTitle);//組合DOM
        printDoc.appendChild(docDetail);//組合DOM
        
        pdf.html(printDoc, {
             html2canvas:{
                width: 1000,
                scale:0.6 //縮放系數，根據具體的頁面再調整
              },
             callback: function (pdf) {
               pdf.save(String(item.Title)+".pdf");//儲存
             }});
           

4.相關問題

4.1 出現找不到html2canvas的問題？

A：因為html()方法會在内部調用html2canvas是以要将html2canvas導入進來，并且使用window.html2canvas設定一下。

4.2 尺寸不容易控制？

A：首先DOM元素和html2canvas畫布的尺寸要使用px機關（防止分辨率不同的機器上顯示不同），畫布生成後再會導入建立pdf頁面，此時pdf頁面要使用絕對機關pt。通過一定的縮放設定（scale）保證canvas能導入到pdf。