點這裡進入ABP進階教程目錄 

問題描述

功能按鈕 - 導出PDF，中文信息導出為亂碼。

解決方案

導出PDF是通過pdfmake.js實現的。

檢查發現是pdfmake引用的vfs_fonts.js字體只有一種: Roboto，而Roboto不支持中文。

解決思路是生成一個包含支持中文字體的vfs_fonts.js替換掉舊的文件。

下載項目

下載pdfmake https://github.com/bpampuch/pdfmake

安裝gulp

全局安裝

npm i gulp-cli -g

本地安裝

npm install --save-dev gulp

查看版本

gulp -v

生成字體

生成字體

gulp buildFonts

替換字體

把生成的pdfmake-master\build\vfs_fonts.js複製替換
JD.CRS.Web.Mvc\wwwroot\lib\dataTables\pdfmake\vfs_fonts.js 

更新配置

打開展示層(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\Course\Index.js //用以存放Course查詢相關腳本

找到DataTable/buttons參數設置

添加如下代碼 

pdfMake.fonts = {
    Roboto: {
        normal: 'Roboto-Regular.ttf',
        bold: 'Roboto-Medium.ttf',
        italics: 'Roboto-Italic.ttf',
        bolditalics: 'Roboto-Italic.ttf'
    },
    微軟雅黑: {
        normal: 'msyh.ttf',
        bold: 'msyh.ttf',
        italics: 'msyh.ttf',
        bolditalics: 'msyh.ttf',
    }
};