完美解決jspdf各種中文亂碼問題

ywbjja發表於2018-12-20

我就像一個啞巴一樣

今天分享一下完美解決jsPDF生成pdf出現亂碼的問題,包括文字,表格表頭已經表格內部出現亂碼的問題~
首先老規矩把程式碼clone下來

git clone https://github.com/MrRio/jsPDF.git
複製程式碼

然後開啟檔案根目錄會看到一個fontconverter的資料夾

完美解決jspdf各種中文亂碼問題
開啟裡面的html檔案,然後把選擇你的本地檔案,填上name最好要填中文!然後會生成一個js檔案,然後你需要把這個js檔案複製到你前端檔案的static靜態資源目錄下,並且在頁面上引用。

完美解決jspdf各種中文亂碼問題
TIP:最好按照我下圖的順序引入,不然又可能會出現問題~

完美解決jspdf各種中文亂碼問題
然後你只需要

doc.setFont('msyh')
複製程式碼

其實這個時候pdf內部的文字和表格內的中文都應該會正常顯示了,但是表頭還是出現了亂碼,

完美解決jspdf各種中文亂碼問題
因此我就去翻了下jspdf-autotable的js原始碼,程式碼如下

完美解決jspdf各種中文亂碼問題
其實重點就是圖中標紅的地方,當你選擇table的主題為grid的時候,它預設header那裡的fontStylebold,如果你把這裡改成normal然後再重新生成pdf就會發現中文也正常了~

完美解決jspdf各種中文亂碼問題
問題就這樣迎刃而解了~心情大好有木有!

歡迎來關注我的公眾號~

完美解決jspdf各種中文亂碼問題

相關文章