簡介
本文使用jspdf 1.5.3版，GitHub地址：https://github.com/MrRio/jsPDF
jspdf是歪果仁開發的，因此在一開始就沒想過支持非英文以外的文字，這就導致了非英文的文本都是亂碼，
因此就有其他大佬給增加了其他解決方案，到了1.5版本也正式加入了非英文支持的解決方案，
解決的思路大致是，給jspdf加載其他字體庫，使其能夠正常輸出中文，
打包字體檔案
在開始的第一步我們需要從GitHub下載源代碼，因為我們需要使用其中附帶的工具fontconverter，
下載好后我們進入fontconverter檔案夾可以看到以下目錄，
直接使用瀏覽器打開fontconverter.html檔案，可以看到如下界面
點擊選擇"*.ttf"字體檔案，然后點擊生成，會得到一個js檔案，這個檔案就是把字體檔案通過base64編碼轉換成字串存盤到js檔案中，該檔案在后續步驟中使用，
生成的js檔案結構大概如下：
重點注意
- 字體檔案僅支持ttf格式的檔案，并且區分字體的粗細,如果HTML包含多種粗細的文本，必須加載多個字體
fontName欄位必須設定為小寫(存在bug的原因)- 善意的提醒：不要使用商用授權字體，除非你有授權，商用授權字體如：微軟雅黑
思源字體下載：https://pan.baidu.com/s/14YAE8X_zZ0wMY19npGrwrg
注意：此下載僅為博主隨意找的一個網盤打包連接，建議大家到官網地址下載，
撰寫測驗代碼
在全面應用之前需要做一些測驗，避免不必要的彎路，測驗代碼如下
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src='https://www.cnblogs.com/dist/jspdf.debug.js'></script>
<script src="https://www.cnblogs.com/dist/sourcehansanscn-normal-normal.js"></script>
<script>
var doc = new jsPDF({ orientation: 'p', format: 'a4' });
doc.setFont('sourcehansanscn-normal', 'normal');
doc.setFontSize(20);
doc.html('<div style="font-faimly:sourcehansanscn-normal;">Chinese: 中文</div>', {
callback: function (newDoc) {
newDoc.save('chinese-html.pdf')
}
});
doc.text("中文歡迎您", 1, 30);
doc.save('chinese-pdf.pdf')
</script>
因為html轉pdf依賴html2canvas.js因此需要先加載此檔案，github地址：https://github.com/niklasvh/html2canvas
此處代碼匯出了2個pdf檔案，設定了中文字體后，一個是直接使用jspdf的API直接繪制pdf，另外一個則是使用html輸出pdf檔案，
重點注意：匯出HTML需要在匯出的HTML中對中文文本直接指定font-faimly，否者HTML匯出的pdf仍會中文亂碼
html轉pdf代碼
如果以上測驗代碼通過了，就可以撰寫正式的匯出代碼，
html方法定義：
html(HTMLelement|string,callback)
引數：
- 第一個引數可以傳遞HTML的節點或HTML的代碼字串
- 第二個引數是HTML轉pdf完成后的回呼，回呼會傳遞pdf實體物件的引數
范例代碼如下：
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src='https://www.cnblogs.com/dist/jspdf.debug.js'></script>
<script src="https://www.cnblogs.com/dist/sourcehansanscn-normal-normal.js"></script>
<script>
var doc = new jsPDF({ orientation: 'p', format: 'a4' });
doc.setFont('sourcehansanscn-normal', 'normal');
doc.setFontSize(20);
doc.html(document.body, {
callback: function (newDoc) {
newDoc.save('chinese-html.pdf')
}
});
</script>
html到匯出pdf的頁面設計注意事項：
- 首先通過全域設定
font-faimly為中文字體 - 嘗試匯出后逐一檢查仍為亂碼元素的
font-faimly是否是已加載的中文字體 - 字體跟粗細有關，如果存在加粗的文本，則需要加載對應加粗的字體，
- 因為直接通過js打包的字體檔案非常的大，因此不宜過多過大，否則可能導致頁面加載慢和js記憶體不足，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/167018.html
標籤：JavaScript
上一篇：JS基礎語法---編程思想和物件