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\',
    }
};