jspdf簡單使用

安裝

npm install jspdf --save

 

英文輸出

  import jsPDF from 'jspdf-customfonts'


          let doc = new jsPDF()
          doc.text('Hello world!', 10, 20)
          doc.save('a4.pdf')

 

中文輸出， 截圖版

把中文作成圖片，在插入到jspdf

//安裝js截圖包
cnpm install --save html2canvas




import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
          html2canvas(document.querySelector("#capture")).then(canvas => {
            let doc = new jsPDF()
            doc.text('您輸入的300與正確值相差0~10%', 10, 10) //文本
            doc.text('Hello world!', 10, 20)
            doc.text('Hello world!', 10, 30)
            doc.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', 10, 40, 200 , 100)

            doc.addFont('Dengb.ttf', 'NotoSansCJKjp', 'normal')
            doc.setFont('NotoSansCJKjp')
            doc.text(15, 250, '您輸入的300與正確值相差0~10%')
            let paragraph = '您輸入的300與正確值相差0~10%您輸入的300與正確值相差0~10%您輸入的300與正確值相差0~10%'
            let lines = doc.splitTextToSize(paragraph, 150)
            doc.text(15, 300, lines)
            doc.save('a4.pdf')
          })

結果

 

 

中文輸出，引入字體版

1.cnpm install jspdf-customfonts安裝

2.本地找到上面安裝的包的源代碼

 

3.找到windows的字體文件，ttf格式的

4.拷貝到步驟2的fonts文件下

5.返回上層目錄，打開cmd窗口，運行node makeFonts.js，將在dist目錄下生成default_vfs.js

5.default_vfs.js內容大體以下

 

6.將文件對應文件拷到其餘地方，而後引入

    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
    <script src="static/js/jspdf.customfonts.min.js"></script>
    <script src="static/js/default_vfs.js"></script>

7.導入代碼

          let doc = new jsPDF()
          doc.addFont('Dengb.ttf', 'NotoSansCJKjp', 'normal');
          doc.setFont('NotoSansCJKjp');
          doc.text('您輸入的300與正確值相差0~10%', 10, 10) //文本
          doc.text('Hello world!', 10, 20)
          doc.save('a4.pdf')

8.結果對比