前端使用jsPdf導出pdf文檔

最近遇到一個需求,就是要把幾個頁面的資料彙總一下生成pdf報表(當然資料是後端封裝好的),于是乎第一時間想到了 jspdf,但是也踩了不少坑,尤其是它竟然不支援中文.

先上點代碼…

1.安裝jspdf

javascript 代碼

npm install -S jspdf
           

2.安裝完畢後,在要使用的元件導入jsPDF(以vue為例)

javascript 代碼

import jsPDF from 'jspdf';
let doc = new jsPDF();
           

3.設定一下字型

1) getFontList 擷取所有可用字型清單 (但是沒有中文)

2) addFont 添加字型

3) setFont 設定字型 (經測試添加中文字型并不可用)

4) 具體還是去github上看文檔吧

4 使用jspdf 建立文檔,來一個簡單的小demo

javascript 代碼

doc.text('Hello jsPDF', 10, 10);
doc.save('test.pdf');
           

5.中文問題不解決,還是用不了啊,最後找到了另一個包 (jsPDF-CustomFonts-support),該包核心還是jspdf,隻不過進行了擴充,允許我們自定義字型.

它最大的問題在于一共需要加載7個js檔案,其中一個是一個比較大的字型檔案.

還是先說說怎麼加載自定義字型來解決中文亂碼問題吧

1) 按照這個文檔載入必須的js檔案

2) 打卡最後的js檔案也就是(vfs_fonts.js),裡面傳回一個對象,這個對象就是字型檔案的base64編碼

3) 如果不需要這個字型的話,可以将裡面的字型base64編碼删幹淨,找一個中文字型(比如 微軟雅黑.ttf),首先可以把字型檔案壓縮一下(效果不大),将該字型檔案轉為base64編碼

4) 将轉化好的base64編碼放到剛才說的return 對象裡面,鍵名可以自己定義,鍵值就是改字型編碼

5) 然後添加字型,設定字型,跟上文提到的API一緻

javascript 代碼

doc.addFont('regular.ttf', 'regular', 'normal');
doc.setFont('regular');
           

這裡的”regular.ttf” 就是鍵名, 第二個參數可以當做别名,第三個照抄就行,最後是使用該字型.

6.最後還是覺得很麻煩啊!!!