解決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內存不足。