免费空间建网站,中小型网站建设与管理总结,宁波网络建站公司有哪些,企业解决方案 英文JS DataTable中导出PDF中文乱码 文章目录 JS DataTable中导出PDF中文乱码一. 问题二. 原因三. vfs_fonts.js四. pdfmake.js五. 解决六.参考资料 一. 问题 二. 原因
DataTable使用pdfmake#xff0c;pdfmake默认字体为Roboto#xff0c;不支持中文字体。添加自己的字体#…JS DataTable中导出PDF中文乱码 文章目录 JS DataTable中导出PDF中文乱码一. 问题二. 原因三. vfs_fonts.js四. pdfmake.js五. 解决六.参考资料 一. 问题 二. 原因
DataTable使用pdfmakepdfmake默认字体为Roboto不支持中文字体。添加自己的字体需要引入对应的vfs_fonts.js文件修改pdfmake.js。 在我的项目中对应datatable文件夹下的vfs_fonts.js和pdfmake.min.js也有人是改三个文件vfs_fonts.jspdfmake.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 {;$phpDirdir(.);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 . ,;}}$outputsubstr($output,0,-1);$output . };;if (isset($_REQUEST[tofile])) {$fh fopen(vfs_fonts.js, w) or die(CANT 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实现中文支持解决中文乱码问题
