JS DataTable中导出PDF中文乱码
文章目录
- JS DataTable中导出PDF中文乱码
- 一. 问题
- 二. 原因
- 三. vfs_fonts.js
- 四. pdfmake.js
- 五. 解决
- 六.参考资料
一. 问题
二. 原因
DataTable使用pdfmake，pdfmake默认字体为Roboto，不支持中文字体。添加自己的字体，需要引入对应的vfs_fonts.js文件，修改pdfmake.js。
（在我的项目中，对应datatable文件夹下的vfs_fonts.js和pdfmake.min.js，也有人是改三个文件，vfs_fonts.js，pdfmake.js和dataTable.buttons.min.js，思路对了就没问题）
主要思路依据：官网上对于添加字体的方法指导
前端页面的js内dataTable不需要改，PDF导出按钮由前端界面的JS文件中DataTable设置。
三. vfs_fonts.js
获取中文版的vfs_fonts.js主要有两种方法：自己生成和寻找资源。
- 自己生成vfs_fonts.js文件
首先需要准备字体的ttf文件。官网上对于如何生成有以下三种方法：
（1）安装pdfmake
（2）通过shell脚本
官网对于使用shell脚本生成vfs_fonts.js文件的方法指导
（3）通过php脚本
我使用的是这种方法，所以前面两种没有详细介绍。
官网对于使用php脚本生成vfs_fonts.js文件的方法指导
将字体ttf文件和该php文件放置同一目录下，生成的vfs_fonts.js文件也会在该目录中。
<?php
$output = "this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {";
$phpDir=dir('.');
while (($file=$phpDir->read())!==false) {
if ($file!='..' && $file!='.' && $file!='makefont.php' && $file!='vfs_fonts.js') {
$output .= '"';
$output .= $file;
$output .= '":"';
$output .= base64_encode(file_get_contents($file));
$output .= '",';
}
}
$output=substr($output,0,-1);
$output .= "};";
if (isset($_REQUEST['tofile'])) {
$fh = fopen('vfs_fonts.js', 'w') or die("CAN'T OPEN FILE FOR WRITING");
fwrite($fh,$output);
fclose($fh);
echo 'vjs_fonts.js created';
} else {
echo $output;
}
如果在目录下未生成vfs_fonts.js文件，在浏览器中显示文件内容，可以去掉if (isset($_REQUEST['tofile'])) {}这个判断条件。
生成的vfs_fonts.js文件如图所示：
需要将前面的"run.php"内容删除，得到：
对比原来Roboto字体的vfs_fonts.js文件，发现要设置normal、bold、italics、bolditalics样式，也是在同一个vfs_fonts.js文件中：
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
"xxx-Italic.ttf":"xxxxxxxxxxxxxxxx",
"xxx-Medium.ttf":"xxxxxxxxxxxxxxxx",
"xxx-MediumItalic.ttf":"xxxxxxxxxxxxxxxx",
"xxx-Regular.ttf":"xxxxxxxxxxxxxxxx"
}
使用该方法我导出的pdf能显示部分中文字体，也只能显示部分英文字体，不知道是生成方式有问题还是我字体ttf文件有问题。于是去找现成的资源了。
- 在网上寻找vfs_fonts.js资源
资源下载地址
四. pdfmake.js
（以下内容找不到可以去dataTable.buttons.min.js找，找的时候找相似格式，主要讲个思路）
- 设置字体
搜索Roboto，找到它设置字体样式部分，在后面添加自己的字体Chinese（这里四个样式用同一份字体文件）：
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-MediumItalic.ttf'
},
Chinese: {
normal: 'Chinese.ttf',
bold: 'Chinese.ttf',
italics: 'Chinese.ttf',
bolditalics: 'Chinese.ttf'
}
};
- 检查createPdf()函数
确保形式是pdfMake.createPdf(docDefinition, tableLayouts, fonts, vfs)。 - 修改defaultStyle
找如下格式：
此外，将pdfmake.js里除了pdfmake.fonts = {}外所有的“Roboto”改成自己的字体“Chinese”。
五. 解决
六.参考资料
一些有用的参考资料：
导出PDF按钮在前端界面设置，而非Datatable中设置的
官网中关于非英文字符导出PDF乱码的讨论
datatable 导出无乱码中文pdf文件
pdfmake实现中文支持，解决中文乱码问题
