jspdf中文乱码的解决,包括普通text文本及autotable中文乱码解决,超详细!!! |
您所在的位置:网站首页 › 中文字体文件下载 › jspdf中文乱码的解决,包括普通text文本及autotable中文乱码解决,超详细!!! |
直接使用jspdf导出效果:中文乱码了 前言: jsPDF github地址 里面有使用其他字体的介绍 在浏览器中打开这个文件,初始页面为: 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字段的二进制字符串,可以留言,因为文件较大不方便粘贴。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |