ABP进阶教程10 - PDF导出中文乱码

点这里进入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',
    }
};