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

PDF&&XLSX 同时被 2 个专栏收录
5 篇文章 0 订阅
25 篇文章 0 订阅

关于如何***使用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的自定义变量里面,就完啦!


敲黑板!!!

就这中文乱码,简直了简直了,感觉是左脚刚出坑,又脚又进去:

包括在你渲染表格和标题的时候,顺序都不能乱,要不然就是乱码

还有引入官方的jspdf.debug.jsjspdf.min.js效果都不一样,要不乱码,要不报错doc.addFileToVFS is not function...

还有这个jspdf.plugin.autotable.js,官方的也有压缩版,和上面那个js搭配竟然也是一会报错,一会表格没有样式,都叠在一起,就这个和上面的bug,整了一天

这三个bug只不过是我遇到的无数个想撞墙的其中三个

你都想象不到bug会出现在哪里,枯了枯了

如果有小伙伴照我的来,也可能会出现报错或者乱码,应该因为是那个jspdf.min.js的版本问题,我没用官方的,用了别的cdn库下载的,我也是试了无数才试出来,要资源的看这里


就酱~

  • 4
    点赞
  • 7
    评论
  • 10
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字50 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值