一文解决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导出即可看到效果。

四、补充

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

相关推荐
UpYoung!4 小时前
无广技术贴!【PDF编辑器】Solid Converter PDF保姆级图文下载安装指南——实用推荐之PDF编辑软件
学习·数学建模·pdf·编辑器·运维开发·个人开发
Uluoyu5 小时前
支持Word (doc/docx) 和 PDF 转成一张垂直拼接的长PNG图片工具类
java·pdf·word
恶猫8 小时前
Polaris Officev9.9.12全功能解锁版
pdf·word·excel·ppt·office·办公·打工
SEO-狼术12 小时前
Find Text Fast in Any PDF Document
pdf
南风微微吹1 天前
【四级】全国大学英语四级历年真题及答案解析PDF电子版(2015-2025年6月)
pdf·英语四级
starxg1 天前
bkhtmltopdf - 高性能 HTML 转 PDF 工具(代替 wkhtmltopdf)
java·pdf·html·wkhtmltopdf·htmltopdf
SoberChina1 天前
Jasperreport 导出word 多个element重叠部分导致不显示(不支持)
pdf·word·jaspersoft·模版打印
reasonsummer2 天前
【办公类-115-05】20250920职称资料上传04——PDF和PDF合并PDF、图片和PDF合并PDF(十三五PDF+十四五图片)
java·python·pdf
龙仔CLL2 天前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
缺点内向2 天前
Java:将 Word 文档转换为密码保护的 PDF 文件
java·pdf·word