记录vue3页面转成pdf文件中文乱码的一个坑

2024-07-11 10:02:34 浏览数 (2)

前言

最近有个需求,点击按钮,能将页面转成pdf文件,并且发送邮件。前端是使用vue3写的,页面转成pdf后,想在每个页面添加标题和页码,添加英文页码不会出现问题,添加中文标题就会出现bug,如下所示:

记录vue3页面转成pdf文件中文乱码的一个坑记录vue3页面转成pdf文件中文乱码的一个坑

在网上搜索了很多信息,大部分都是需要去GitHub上下载jspdf的包然后将字体文件转化成js文件。解决方法

根据上面的链接一步一步操作,基本都能解决,但是容易出问题的就在字体文件上,我一开始是用微软雅黑的字体文件转js文件,发现还是无法解决乱码问题,后面使用了另外一种字体文件才解决乱码问题。如下所示,左边是微软雅黑的字体文件(未解决),右边是另外一个字体文件(已解决)。

记录vue3页面转成pdf文件中文乱码的一个坑记录vue3页面转成pdf文件中文乱码的一个坑

使用左边字体文件会出现报错,如下所示:

记录vue3页面转成pdf文件中文乱码的一个坑记录vue3页面转成pdf文件中文乱码的一个坑

使用右边字体文件也会出现报错,但是可以成功生成正确的pdf文件。

总结

若使用一种字体文件还会导致乱码,就可以尝试换一种字体文件,不要一直纠结代码。最后也不确定是不是因为后缀名,微软雅黑是ttc后缀,另外一个是ttf后缀。

0 人点赞