解决jspdf导出pdf中文乱码

最新推荐文章于 2024-09-09 11:48:58 发布

jinggaoniao

最新推荐文章于 2024-09-09 11:48:58 发布

阅读量5k

点赞数 3

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/jinggaoniao/article/details/108751020

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

最近的项目中有一个新需求，要求前端将页面导出为pdf文件，翻阅资料，找到了jspdf这个文件生成库，唯一出现的bug就是中文乱码，如下图所示：

好在找到了解决的方法，现将解决方法记录如下：

第一步：先将jspdf下载下来https://github.com/MrRio/jsPDF

找到里面转换字体的文件

第二步：选择合适的字体。

我这里选择的是电脑自带的黑体进行的转换，你们也可以根据需求去转换自己需要的字体。找到电脑中simhei.ttf文件，打开上一步中的fontconverter.html文件进行转换。我这里转换之后的js文件名为simhei-normal.js。

第三步：将字体添加到导出方法中，如下代码所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>中文汉字乱码测试</title>
    <script src="jspdf.min.js" charset="utf-8"></script>
    <script src="jspdf.customfonts.min.js"></script>
    <script src="simhei-normal.js"></script>
    <script type="text/javascript">
      //页面初始化
      function init() {
        var doc = new jsPDF();
        //添加并设置字体
        doc.addFont('simhei.ttf', 'simhei', 'normal');
        doc.setFont('simhei');
        doc.text(20, 20, '中文汉字乱码测试');
        doc.save('Test.pdf');
      }
    </script>
  </head>
  <body onload="init()">
  </body>
</html>

最后测试一下效果，如下图所示，导出的文件已经是正常的黑体中文了。