引言:當初自己為了在項目中bootstrap-table中實現導出pdf,使用的pdfmake,但是pdfmake默認使用的不是中文字體,實現pdfmake使用中文字體主要就是編譯新的vfs_fonts.js代替原來vfs_fonts.js文件引入到前端頁面中,為了編譯出新的字體文件,我也查了很多資料,多數都說用grunt重新打包examples\fonts下的文件,但是經我本人實驗pdfmake 版本的源代碼根本沒有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文件成了一個巨大的痛點,不知道有沒有大神解決了這個問題......