解決html導出pdf中文亂碼問題的正確姿勢

簡介

本文使用jspdf 1.5.3版。GitHub地址：https://github.com/MrRio/jsPDF

jspdf是歪果仁開發的，因此在一開始就沒想過支持非英文以外的文字，這就導致了非英文的文本都是亂碼。

因此就有其他大佬給增加了其他解決方案，到了1.5版本也正式加入了非英文支持的解決方案。

解決的思路大致是，給jspdf加載其他字體庫，使其能夠正常輸出中文。

打包字體文件

在開始的第一步我們需要從GitHub下載源代碼，因為我們需要使用其中附帶的工具fontconverter。

下載好后我們進入fontconverter文件夾可以看到以下目錄。

直接使用瀏覽器打開fontconverter.html文件，可以看到如下界面

點擊選擇"*.ttf"字體文件，然后點擊生成，會得到一個js文件。這個文件就是把字體文件通過base64編碼轉換成字符串存儲到js文件中。該文件在后續步驟中使用。

生成的js文件結構大概如下：

重點注意

1. 字體文件僅支持ttf格式的文件，並且區分字體的粗細,如果HTML包含多種粗細的文本，必須加載多個字體
2. fontName 字段必須設置為小寫(存在bug的原因)
3. 善意的提醒：不要使用商用授權字體，除非你有授權，商用授權字體如：微軟雅黑

思源字體下載：https://pan.baidu.com/s/14YAE8X_zZ0wMY19npGrwrg

注意：此下載僅為博主隨意找的一個網盤打包連接，建議大家到官網地址下載。

編寫測試代碼

在全面應用之前需要做一些測試，避免不必要的彎路。測試代碼如下

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
	<script src='../../dist/jspdf.debug.js'></script>
    <script src="../../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='../../dist/jspdf.debug.js'></script>
    <script src="../../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的頁面設計注意事項：

1. 首先通過全局設置font-faimly為中文字體
2. 嘗試導出后逐一檢查仍為亂碼元素的font-faimly是否是已加載的中文字體
3. 字體跟粗細有關，如果存在加粗的文本，則需要加載對應加粗的字體。
4. 因為直接通過js打包的字體文件非常的大，因此不宜過多過大，否則可能導致頁面加載慢和js內存不足。