jspdf中文乱码的解决,包括普通text文本及autotable中文乱码解决,超详细!!!

直接使用jspdf导出效果:中文乱码了
在这里插入图片描述
解决后:
在这里插入图片描述

前言:
jsPDF github地址
里面有使用其他字体的介绍
在这里插入图片描述
具体步骤:
1.首先需要一个支持中文的字体ttf文件,可以在网上下载,也可以使用本地window/font/路径下的文件(选择一个自己需要的),这个文件将在步骤3中用到
在这里插入图片描述
2.下载jspdf
方式1:使用命令git clone https://github.com/MrRio/jsPDF.git
方式2:下载zip文件
在这里插入图片描述
3.下载后找到fontconverter目录中的fontconverter.html文件:
在这里插入图片描述

在浏览器中打开这个文件,初始页面为:
在这里插入图片描述
此时就要用到ttf文件了,选择步骤1提到的ttf文件,(如果选择本地window/font下面的文件可能会提示没有打开该文件夹的权限,此时可以把需要的ttf文件复制一份到其他路径再上传)上面的fontName会自动填充(也可以自定义名字,需要为小写字母)
选择ttf文件后点击create:
在这里插入图片描述
将生成一个js文件:
在这里插入图片描述
4.将生成的这个js文件放入自己的项目中,具体路径根据自己需要放置。生成js文件内容为:

import { jsPDF } from "jspdf"
var font = 'AAEAAAAVA...'//只截取了前几个字符串
var callAddFont = function () {
this.addFileToVFS('simhei-normal.ttf', font);
this.addFont('simhei-normal.ttf', 'simhei', 'normal');
};
jsPDF.API.events.push(['addFonts', callAddFont])

5.在需要导出pdf的文件中引入这个js文件,(这里是react+typescript项目;注意:在typescript项目中需要将文件后缀名改为ts,否则引入后会报404的错误)

import './simhei-normal'

6.设置字体:

const doc = new jsPDF() as any;
doc.setFont('simhei');//simhei其实就是步骤1中的fontName,如果忘记了可以在生成的js中查看
//表格中的设置
doc.autoTable({
		body: getData(data, headers),
		columns: headers,
		styles: {
			font: 'simhei', //字体,如果不配置,表格中的中文仍会乱码
			textColor: [0, 0, 0],
		},
	})

示例:

import { jsPDF } from 'jspdf'
import 'jspdf-autotable'
import './simhei-normal'
function exportPDF(data, filename: string){
	const doc = new jsPDF() as any;
	doc.setFont('simhei')
	doc.autoTable({ body: [         
                { header1: '哈哈哈', header2: '嘿嘿嘿', header3: '啦啦啦' },
                { header1: '北京', header2: '上海', header3: '重庆' },
            ],
            columns: [      
                { header: '表头1', dataKey: 'header1' },
                { header: '表头2', dataKey: 'header2' },
                { header: '表头3', dataKey: 'header3' },
            ],
            styles: { fillColor: [0, 0, 0], font: 'custom', textColor: [255,255,255] },  
     })    
	doc.save(`${filename}.pdf`);
}

7.完成

补充:如果不想或者无法通过引入上面的js文件来实现,也可以将生成的js文件的font字段内容提取出来直接使用

const font='AAA......'//提取的ttf的二进制编码结果
const doc=new jsPDF()
doc.addFileToVFS("MyFont.ttf", font);//第一个参数名为自定义命名
doc.addFont("MyFont.ttf", "MyFont", "normal");//第二个参数为字体的名字,也是自命名,第三个参数统一为normal
doc.setFont('MyFont');//参数为字体名,这里为上面新增的MyFont,如果想知道当前包含了字体可以通过doc.getFontList()查看

最后:如果无法生成步骤3中的js文件或者需要font字段的二进制字符串,可以留言,因为文件较大不方便粘贴。

评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值