JSPDF支持中文（思源黑体）采坑之旅，JSPDF中文字体乱码解决方案

在网页开发中，我们经常需要将一些中文内容呈现在网页上，比如网站的标题、按钮文案等等。在过去，我们通常会使用 PDF 格式来输出这些内容，因为 PDF 格式可以支持更多的排版和字体样式，并且在不同的设备上都能够很好地呈现。但是，随着 HTML5 的普及和 JavaScript 的流行，我们开始使用 JavaScript 和 CSS 等前端技术来构建网页。这就意味着我们不能再使用传统的 PDF 格式来输出网页内容。幸运的是，现在有一种名为 JSPDF 的技术可以帮助我们实现在网页上输出中文内容的需求。

JSPDF是一个用于生成PDF文件的JavaScript库，它默认可能不包含对中文的良好支持。在使用中文时，特别是使用中文自定义字体时，可能会遇到乱码的问题。以下是解决JSPDF中文字体乱码问题的一般步骤：

步骤 1: 下载中文字体文件

1. 选择中文字体文件： 确保您有中文字体的TTF（TrueType Font）文件，比如思源黑体（Source Han Sans）。

2. 下载字体文件： 访问Adobe Fonts或其他字体提供网站，下载并获取思源黑体字体的TTF文件。

步骤 2: 将字体文件嵌入到JSPDF

1. 引入字体库： 在HTML中引入JSPDF和字体文件：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.debug.js"></script>
    <script src="https://unpkg.com/jspdf@2.4.0/plugins/addimage.js"></script>
    <script src="https://unpkg.com/jspdf@2.4.0/dist/jspdf.umd.min.js"></script>
    <script src="https://unpkg.com/jspdf@2.4.0/dist/jspdf.debug.js"></script>

2. 嵌入字体： 在使用JSPDF生成PDF之前，通过以下方式嵌入字体：

    // 导入字体文件
    var fontSourceHanSans = 'path/to/source-han-sans.ttf';
    // 创建字体
    var font = new FontFace('SourceHanSans', `url(${fontSourceHanSans})`);
    // 加载字体
    font.load().then(function(loadedFont) {
        document.fonts.add(loadedFont);
        // 在生成PDF之前设置字体
        var doc = new jsPDF();
        doc.addFont('SourceHanSans', 'SourceHanSans', 'normal');
        doc.setFont('SourceHanSans');
        // 继续生成PDF的代码...
    });

步骤 3: 设置中文文字

在生成PDF时，确保使用已经加载的中文字体：

// 在生成PDF的代码中设置字体
var doc = new jsPDF();
doc.addFont('SourceHanSans', 'SourceHanSans', 'normal');
doc.setFont('SourceHanSans');
// 添加中文文字
doc.text('你好，世界！', 10, 10);
// 继续添加其他内容...

注意事项：

• 请根据实际情况修改字体文件的路径。
• 确保字体文件的CORS（跨域资源共享）设置正确，以防止浏览器的跨域问题。
• 使用新版JSPDF时，确保参考对应版本的文档。

通过这些步骤，您应该能够在JSPDF中成功使用中文字体，并解决中文乱码问题。