廣告聯播

2018年9月18日 星期二

pdfmake 實現中文字支援,解決中文亂碼問題,以 DataTables 為例

From: Polin Wei
實現pdfmake使用中文本體主要就是編譯新的vfs_fonts.js代替原來vfs_fonts.js文檔引入到前端頁面中,為了編譯出新的字體文檔,下列是中文顯示的解決方法,供大家參考:
操作系統:Windows
操作步驟:
1. 安裝node.js
2. 下載pdfmake的源代碼、下載地址https://github.com/bpampuch/pdfmake
3. 在源代碼根目錄下安裝gulp:
打開cmd命令窗口,定位到源代碼根目錄,如:cd V:\pdfmake-master

npm install gulp
npm install -g gulp
npm i -g gulp-cli
執行gulp -v顯示gulp版本號則説明安裝成功
4. 利用gulp打包字體ttf文檔到vfs_fonts.js文檔中
gulp安裝成功後,查看源代碼根目錄下的gulpfile.js,發現gulp編譯還依賴了很多其他的模塊,所以需要一一安裝,沒辦法所以得一一安裝:npm install webpack-stream、npm install gulp-uglify 等等

V:\pdfmake-master>npm i -g gulp-cli

V:\node-v8.12.0-win-x64\gulp -> V:\node-v8.12.0-win-x64\node_modules\gulp-cli\bin\gulp.js

+ gulp-cli@2.0.1

added 235 packages from 147 contributors in 6.71s

V:\pdfmake-master>gulp buildFonts

[13:48:16] Using gulpfile V:\pdfmake-master\gulpfile.js

[13:48:16] Starting 'buildFonts'...

[13:48:17] Finished 'buildFonts' after 382 ms

從本地 C:\Windows\Fonts 下拷貝一箇中文本體到D:\download\chrome\pdfmake-master\examples\fonts目錄下,並刪除fonts目錄下原來的ttf文檔,這裏有一個問題,中文本體都很大,囧。
請選了一個最小的字體上:標楷體-標準 ,這一步完成之後,字體打包生成的vfs_fonts.js會覆蓋源代碼根目錄的build目錄下的vfs_fonts.js文檔,這時需要將vfs_fonts.js拷貝到你的項目當中替換原來的vfs_fonts.js,並引用的html頁面中

(繼續閱讀...)

1 則留言:

  1. casino bonus code PLAYNJ - Oyster Hotel Reviews
    There are 4 live table games to choose from. You 브라 벗기 미션 can bet on both slots 토토 가입 머니 or table games, such as blackjack 바카라양빵 or 포커 고수 roulette. Casino bonus code PLAYNJ. ㅅ ㅇㅌ 추천

    回覆刪除