直接使用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字段的二进制字符串,可以留言,因为文件较大不方便粘贴。