JSPDF 中文亂碼

引用自 https://www.hangge.com/blog/cache/detail_2207.htmljavascript

1,問題描述

(1)若是添加的文字中包含有中文(漢字),咱們會發現生成的 pdf 文件時,裏面中文部分就會變成亂碼:
原文:JS - PDF文件生成庫jsPDF使用詳解3(解決中文亂碼問題)
(2)這是因爲 jsPDF 默認是不支持中文的。咱們能夠經過手動引入中文字體,解決了導出 pdf 後中文字體顯示亂碼的問題。
 

2,操做步驟

(1)首先訪問下方地址,將 jsPDF-CustomFonts-support 這個 jsPDF 的字體擴展庫以及字體下載到本地,並放到項目文件夾中:
 
(2)接着將 jspdf.customfonts.min.js 和 default_vfs.js 這兩個 js 引入進來。
1
2
< script  src = "jspdf.customfonts.min.js" ></ script >
< script  src = "default_vfs.js" ></ script >
 
(3)最後在代碼中將中文字體添加並設置使用便可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
   <head>
     <meta charset= "utf-8" >
     <title></title>
     <script src= "jspdf.min.js"  charset= "utf-8" ></script>
     <script src= "jspdf.customfonts.min.js" ></script>
     <script src= "default_vfs.js" ></script>
     <script type= "text/javascript" >
       //頁面初始化
       function  init() {
         var  doc =  new  jsPDF();
         //添加並設置字體
         doc.addFont( 'NotoSansCJKtc-Regular.ttf' 'NotoSansCJKtc' 'normal' );
         doc.setFont( 'NotoSansCJKtc' );
         doc.text(20, 20,  '歡迎訪問 hangge.com' );
         doc.save( 'Test.pdf' );
       }
     </script>
   </head>
   <body onload= "init()" >
   </body>
</html>


原文出自:www.hangge.com  轉載請保留原文連接:https://www.hangge.com/blog/cache/detail_2207.htmlhtml

相關文章
相關標籤/搜索