vue 引用 jspdf 使用默认字体出现中文乱码问题

在使用jspdf的时候发现转中文的位置会出现乱码
在这里插入图片描述

1.在电脑本地找到一个支持中文的字体,最好选取小一点的字体,不然会出现内存溢出。小黄选择的是:hpsimplifiedhans-light
在这里插入图片描述
2.到github上面搜索jspdf,下载对应的压缩包
打开fontconverter文件夹下的fontconverter.html
在这里插入图片描述
转成对应js文件,放到目录下面导入。

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

这样就可以了!
在这里插入图片描述
字体不会转换的朋友关注小黄的公众号回复:字体免费获取
在这里插入图片描述

Vue使用jsPDF出现乱码的问题可能是由于编码或字体设置不正确所致。解决这个问题的方法可以包括以下几个步骤: 1. 确保你的文本内容是以正确的编码方式进行输入的。jsPDF默认使用的是Unicode编码,因此你需要确保你的文本内容是以Unicode格式进行输入的。 2. 检查是否有合适的字体可用于渲染文本。jsPDF默认使用的是Helvetica字体,如果你需要显示多语言字符或特殊字符,可能需要引入其他字体文件。你可以通过使用jsPDF的setFont方法来设置字体,例如:doc.setFont("Arial")。 3. 如果你要生成包含图片的PDF,确保你的图片也是以正确的编码方式进行加载的。你可以使用jsPDF的addImage方法来添加图片,确保你的图片文件是以正确的编码方式加载的。 4. 如果以上步骤都没有解决问题,你可以尝试使用jsPDF提供的字体插件,例如jsPDF-AutoTable或jsPDF-CustomFonts来解决乱码问题。这些插件可以提供更多的字体选择和编码支持。 综上所述,你可以通过检查文本编码、设置正确的字体以及使用相关的插件来解决Vue使用jsPDF出现乱码的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题](https://blog.csdn.net/weixin_41897680/article/details/123072807)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值