当前位置：首页 > news >正文

一文解决jQuery表格插件DataTable导出PDF中文乱码问题

news 2025/8/10 2:10:18

原因是默认字体不支持中文，需要更换字体。

详情官网：pdfmake

官网的大致意思是，下载pdfmake后，自行生成可用的字体js文件

以下是详细操作：

重要前提：电脑上需要已安装nodejs

点击进入官网下载安装即可：Nodejs官网

一、首先获取免费商用字体

推荐去字体天下获取：字体天下官网

创建demo文件夹，进去再创建font文件夹，将下载的字体放到这里

具体参考如下文件目录结构

起始文件目录 >>>

|-- demo							  # 项目文件夹名|-- font                          # 字体文件夹|   |-- xxx.ttf                   # 下载的字体文件

然后单击demo文件夹直接托到vscode中打开

二、安装pdfmake

安装命令

npm install pdfmake

成功示例：

PS D:\peter\桌面\demo> npm install pdfmake

added 42 packages in 11s

17 packages are looking for funding
run npm fund for details

安装后的项目文件目录 >>>

|-- demo							  # 项目根目录|-- font                          # 字体文件夹|   |-- xxx.ttf                   # 下载的字体文件|-- node_modules                  # 安装后生成的文件夹|-- package-lock.json             # 安装后生成的文件|-- package.json                  # 安装后生成的文件

进入目标文件夹

执行命令

cd node_modules/pdfmake/

成功示例：

PS D:\peter\桌面\demo> cd node_modules/pdfmake/
PS D:\peter\桌面\demo\node_modules\pdfmake>

生成目标js文件

执行命令

node build-vfs.js "../../font/"

成功示例：

PS D:\peter\桌面\demo\node_modules\pdfmake> node build-vfs.js “…/…/font/”
Source path: …/…/font/

FILE: xxx.ttf

Builded 1 files to ./build/vfs_fonts.js.
PS D:\peter\桌面\demo\node_modules\pdfmake>

最终文件目录 >>>

|-- demo							  # 项目根目录|-- font                          # 字体文件夹|   |-- xxx.ttf                   # 下载的字体文件|-- node_modules                  # 安装后生成的文件夹|   |-- pdfmake                   # 安装的pdfmake|   |   |-- build         		  # 生成的内容文件夹|   |   |   |-- vfs_fonts.js      # 这是生成的我们所需的最终文件|   |-- 其他文件...|-- package-lock.json             # 安装后生成的文件|-- package.json                  # 安装后生成的文件

然后进入目标文件夹内找到 vfs_fonts.js即可。

三、将生成的此文件引入html

【重要】打开生成的vfs_fonts.js也能看到名称，替换的名称要与此文件内的名称保持一致

this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {"xxx.ttf": "AAEAAAANAIAAAwBQRFNJRwAAAAEAGFQYAAAACEdQT1MOHRLOABg2...后面省略

使用示例：

<!-- 请根据自己存放的路径引入 >>> 此处为示例 -->
<script src="pdfmake.min.js"></script>
<script src="vfs_fonts.js"></script>
<!-- 字体设置的脚本一定要在引入的字体后 -->
<script>var fonts = {// 自定义字体名称Roboto: {  // 这里名称任意，不过要和下面配置的对应normal: 'xxx.ttf',     // 主要将这里的替换为你下载的字体文件名bold: 'xxx.ttf',       // 主要将这里的替换为你下载的字体文件名italics: 'xxx.ttf',    // 主要将这里的替换为你下载的字体文件名bolditalics: 'xxx.ttf' // 主要将这里的替换为你下载的字体文件名}};pdfMake.fonts = fonts;
</script>
<script>
$(document).ready(function() {$('#table').DataTable({buttons: ['excel',  {extend: 'pdfHtml5',title: 'PDF 文件的标题',filename: 'PDF 文件名', messageTop: 'PDF 顶部显示的信息',customize: function (doc) {doc.defaultStyle = {font: 'Roboto'  // 对应自定义的字体名称};}}],// 其他配置...});});
</script>