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

您所在的位置:网站首页 中文字体文件下载 jspdf中文乱码的解决,包括普通text文本及autotable中文乱码解决,超详细!!!

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

2022-12-28 23:25| 来源: 网络整理| 查看: 265

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3