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

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

详情官网：pdfmake

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

以下是详细操作：

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

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

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

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

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

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

起始文件目录 >>>

java 复制代码

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

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

二、安装pdfmake

安装命令

shell 复制代码

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

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

java 复制代码

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

进入目标文件夹

执行命令

shell 复制代码

cd node_modules/pdfmake/

成功示例：

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

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

生成目标js文件

执行命令

shell 复制代码

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>

最终文件目录 >>>

java 复制代码

|-- 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...后面省略

使用示例：

html 复制代码

<!-- 请根据自己存放的路径引入 >>> 此处为示例 -->
<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>

启动项目，点击pdf导出即可看到效果。

四、补充

由于生成是针对文件夹内的所有字体生成的，因此可以下载多个字体，配置的时候选择配置即可。