pdfmake實現中文支持,解決中文亂碼問題


引言:當初自己為了在項目中bootstrap-table中實現導出pdf,使用的pdfmake,但是pdfmake默認使用的不是中文字體,實現pdfmake使用中文字體主要就是編譯新的vfs_fonts.js代替原來vfs_fonts.js文件引入到前端頁面中,為了編譯出新的字體文件,我也查了很多資料,多數都說用grunt重新打包examples\fonts下的文件,但是經我本人實驗pdfmake 0.1.31版本的源代碼根本沒有grunt的管理配置文件,所以使用grunt是不行的,github的說明文檔使用的是gulp,我使用之后,證明是可行。本人在做這些操作之前,對node.js、grunt、gulp知道一點點概念,從未有過實踐。所以這篇博客的目的就是為了幫助新手實現pdfmake的漢化支持。

操作系統:Windows

操作步驟:

  1、安裝node.js,網上的安裝方法很多,比較簡單,這里就不多說了

  2、下載pdfmake的源代碼、下載地址https://github.com/bpampuch/pdfmake,下載之后解壓到本地目錄,如我的源代碼目錄:D:\download\chrome\pdfmake-master

  3、在源代碼根目錄下安裝gulp:

  • 打開cmd命令窗口,定位到源代碼根目錄,如:cd D:\download\chrome\pdfmake-master
  • (這一步不着急執行,看完看下一條)執行npm install gulp命令,安裝gulp到源代碼根目錄下,安裝完之后會發現,源代碼根目錄下多了一個node_modules目錄,目錄下就可以發現剛才安裝的gulp模塊,node_modules目錄是專門存放node.js模塊的,gulp是其中的一個模塊,如下圖
  • 執行上面之后,可以執行gulp -v查看一下gulp版本,我執行了一下這個,提示gulp不是內部命令,可能npm install gulp安裝到本地不行(不懂,沒有細去糾結),我就又執行npm install -g gulp安裝到全局,安裝完成之后,執行gulp -v顯示gulp版本號則說明安裝成功

  4、利用gulp打包字體ttf文件到vfs_fonts.js文件中

  •  gulp安裝成功后,查看源代碼根目錄下的gulpfile.js,發現gulp編譯還依賴了很多其他的模塊,所以需要一一安裝,沒辦法所以得一一安裝:npm install webpack-stream、npm install gulp-uglify 等等

  • 從本地 C:\Windows\Fonts 下拷貝一個中文字體到D:\download\chrome\pdfmake-master\examples\fonts目錄下,並刪除fonts目錄下原來的ttf文件,這里有一個坑,中文字體都很大,囧。我選了一個最小的“方正姚體 常規”

  • 上一步完成之后,cmd定位到代碼根目錄,執行gulp buildFonts,我這里又提示如下圖,於是我又安裝了下圖依賴的模塊npm install jshint,安裝完成之后在執行gulp buildFonts,ok,提示字體打包成功了

  • 上一步完成之后,字體打包生成的vfs_fonts.js會覆蓋源代碼根目錄的build目錄下的vfs_fonts.js文件,這時需要將vfs_fonts.js拷貝到你的項目當中替換原來的vfs_fonts.js,並引用的html頁面中

  5、修改js文件,將自定義的字體添加到pdfMake創建PDF的配置當中

  •  這一步因為我用到了tableExport.js來實現導出doc、Excel、PDF等不同類型,修改tableExport.js里面的代碼,修改配置中的pdfmak的enabled值為true,還要修改fonts字體配置,把你的新字體添加進去

  •  上面步驟不是使用的tableExport.js的話,可以直接修改pdfMake.js的源代碼,參考https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts---client-side

  • ok,完成結果展示

 

遺留問題:中文字體都比較大,將字體打包到vfs_fonts.js當中,在頁面當中引入一個幾M到十幾M大小的js文件成了一個巨大的痛點,不知道有沒有大神解決了這個問題......

 

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM