欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-25 23:50:04
点这里进入ABP进阶教程目录 问题描述 功能按钮 - 导出PDF,中文信息导出为乱码。 解决方案 导出PDF是通过pdfmake.js实现的。 检查发现是pdfmake引用的vfs_fonts.js字体只有一种: Roboto,而Roboto不支持中文。 解决思路是生成一个包含支持中文字体的vfs_ ......

点这里进入abp进阶教程目录 

问题描述

功能按钮 - 导出pdf,中文信息导出为乱码。

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

解决方案

导出pdf是通过pdfmake.js实现的。

检查发现是pdfmake引用的vfs_fonts.js字体只有一种: roboto,而roboto不支持中文。

解决思路是生成一个包含支持中文字体的vfs_fonts.js替换掉旧的文件。

下载项目

下载pdfmake 

安装gulp

全局安装

npm i gulp-cli -g

本地安装

npm install --save-dev gulp

查看版本

gulp -v

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

生成字体

生成字体

gulp buildfonts

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

替换字体

把生成的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',
    }
};