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

前言

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

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

坑

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

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

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

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

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

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

总结

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