解决jspdf中文乱码问题（实践成功）

问题截图

一、下载ttf字体文件至本地项目中

1. 完整的ttf文件
   直接从 某位大佬所写的github上 下载SourceHanSansCN-Normal.ttf
   缺点：文件比较大，会影响加载时渲染性能
2. 瘦身后的ttf文件
   在 Tiac大佬所完成的ttf百度网盘瘦身文件中下载瘦身后的SourceHanSansCN-Normal.ttf
   优点：文件比较小，自己感觉是会快一些

二、下载相应的js文件至本地项目中

借助现成的开源库下载source-han-sans-normal.js文件

三、页面引入相应的js

<!-- jspdf工具，直接复制即可 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<!-- 使jspdf支持中文，`/static/js/source-han-sans-normal.js`替换成本地`source-han-sans-normal.js`文件的路径 -->
<script src="/static/js/source-han-sans-normal.js"></script>

四、js代码

加入下面两行：

// 添加并设置字体
doc.addFont('SourceHanSans-Normal.ttf', 'SourceHanSans-Normal', 'normal');
doc.setFont('SourceHanSans-Normal');

完整代码如下：

function generatePDF() {
      const { jsPDF } = window.jspdf;
      // 创建 jsPDF 实例
      const doc = new jsPDF();
      // 添加并设置字体
      doc.addFont('SourceHanSans-Normal.ttf', 'SourceHanSans-Normal', 'normal');
      doc.setFont('SourceHanSans-Normal');

      const reportTitle = "测试报告"
      const pageWidth = doc.internal.pageSize.getWidth();
      const textWidth = doc.getTextWidth(reportTitle);
      const reportTitle_x = (pageWidth - textWidth) / 2;
      doc.text(reportTitle, reportTitle_x, 20);  // 文本，x 坐标，y 坐标

      // 下载生成的 PDF
      doc.save("sample.pdf");
    }

注意：如果是表格的话，也要在表格的style里面设置font为SourceHanSans-Normal，表格才不会乱码：

doc.autoTable({
        head: head,
        body: data,
        startY: 20,
        styles: { font:'SourceHanSans-Normal', fontSize: 10, cellPadding: 0 },
        headStyles: { fillColor: false },
        bodyStyles: { fillColor: false }
      });

五、运行结果

注意：这是我尝试成功的一种方法，不是很精通，中间可能有一些可以省略的步骤，比如ttf和js可能是有关系的，要一种就可以？欢迎大家指正哟~