解决jspdf中文乱码、表格中文乱码！--终极版！！

最新推荐文章于 2024-06-07 17:15:49 发布

慢半拍、

最新推荐文章于 2024-06-07 17:15:49 发布

阅读量9.6k

点赞数 7

分类专栏： PDF&&XLSX javascript 文章标签： jspdf中文乱码

本文链接：https://blog.csdn.net/huanhuan03/article/details/105841653

版权

javascript 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

PDF&&XLSX

5 篇文章 1 订阅

订阅专栏

关于如何***使用jspdf***，已经在这两篇博文中介绍过了

然而众所周知，这是歪果仁写的，并不支持中文！！！

从这里就走上一段段不归路，跳进一个个神坑，查阅到的博客都是坑，一大部分是抄来抄去，一大部分就是瞎写。。。我是怎么知道的，当然是 ~~都爱过~~ 试过了

代码和目录结构

在这里插入图片描述
这个font.js里面放的是一段““简体苹方””的字体的base64代码，这个base64代码怎么获取下面会说，然后用一个随便自定义变量var moo=''来定义：

js文件夹里面放的除了faker.min.js是无用的，是为了生成假数据的，jquery.js也可以忽略，因为我用的是原生js，当然你要用就用，剩下两个要用的都是官方文档能找到的js文件。

然后就是index.html的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决中文pdf乱码-----终极版</title>
</head>
<body>
    <button onclick="generate()">导出 pdf</button>
    <!-- pdf展示 -->
    <div style="height: 600px;">
        <iframe id="output" src="" frameborder="0" width="100%" height="90%"></iframe>
    </div>



	<!--以下所引入都是官方都有的文件-->
    <script src="./js/jquery-1.10.2.min.js"></script>
    <!-- ==== 这个js用了官方要不乱码，要不报错，我用的是从别的cdn库下载的（https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js） -->
    <script src="./js/jspdf.min.js"></script>
    <!-- ===== -->
    <!-- 这个js是渲染pdf表格的   cnpm install jspdf-autotable 这个下载可用   -->
    <script src="./js/jspdf.plugin.autotable.js"></script>
    <!-- 这个js是自己生成的base64字体代码放的字体文件 -->
    <script src="./font/font.js"></script>


    <script>
            
        var doc = new jsPDF('p', 'pt'); // 获取实例

        // ===============================  设置字体
        doc.addFileToVFS('pingfang.ttf', moo)    //  这个地方就是font.js里面自定义的变量 moo
        doc.addFont('pingfang.ttf', 'custom', 'normal');    //  custom 是自定义的字体名称，后面的normal不能改，不管你是什么字体样式都不能改

        doc.setFont('custom');
        // ===============================



		doc.autoTable({                   // 渲染table，设置table字体也是custom，要不然表格中文还是乱码
            body: [         
                { europe: '大幅度', america: '更丰富', asia: '防辐射' },
                { europe: '发热', america: '额发热', asia: '大V发吃饭' },
            ],
            columns: [      
                { header: '表头1', dataKey: 'europe' },
                { header: '表头2', dataKey: 'asia' },
                { header: '表头3', dataKey: 'america' },
            ],
            styles: { fillColor: [0, 0, 0], font: 'custom', textColor: [255,255,255] },   // 样式、字体配置，有些类似canvas
            theme: 'grid',      // 主题
            didDrawCell: (data) => {    // 在渲染完单元格后的事件
                console.log(data)
            },
            didParseCell: (HookData) => {},     //  当插件完成解析单元格内容时调用
            willDrawCell: (HookData) => {},    //   在绘制单元格或行之前调用
            didDrawPage: (HookData) => {},   //   插件在页面上绘制完所有内容后调用
        })

        doc.text(40, 30, '个人号还挺好')      //  渲染title
        document.getElementById("output").src = doc.output('datauristring');   // 渲染pdf

        function generate() {   // 导出pdf
            doc.save("table.pdf");
        }
    </script>
</body>
</html>

注意：本来到这里是中文了，但是表头还是乱码，看了一下源代码，要修改源码jspdf.plugin.autotable.js，我画红框的地方头部和脚部源代码都是bold样式，这里统一修改为normal：

在这里插入图片描述

然后看页面效果，看到效果的时候，我都热泪盈眶，要源码的看这里：
在这里插入图片描述

如何获取base64字体文件

因为你要用的是中文字体：首先找到你电脑里面安装的中文的.ttf的字体文件，在C盘里面全局搜索.ttf就会出现很多字体，我这里用““简体苹方””示例，注意这个文件拿出来放桌面，名称改成小写的：
在这里插入图片描述
然后要把这个文件转为base64格式的文件，首先在jsPDF的官网github上将整个项目克隆到本地，然后找到如下图所示的html文件：

在这里插入图片描述
打开之后，上传你刚刚存在桌面的pingfang.ttf的文件（注意名字必须小写）：

点击Creat这个按钮，就会生成一个js文件，打开这个js文件，你会发现里面有一段代码，我们只需要很长很长很长的那一段base64字符串，复制出来放进font.js的自定义变量里面，就完啦！