使用jsPDF转换时UTF-8特殊字符显示异常问题求助

jsPDF默认字体不支持土耳其语这类特殊字符，要解决这个问题，需要引入支持UTF-8的字体并配置使用，具体步骤如下：

1. 准备支持特殊字符的字体 #

选一款包含ğ、ş、ı等字符的字体（比如Noto Sans Turkish），通过jsPDF的字体转换器将.ttf格式的字体文件转换为jsPDF兼容的格式。转换完成后会得到一个字体JS文件，把它引入到你的项目中。

2. 修改代码注册并使用字体 #

在downPdf函数里添加字体注册逻辑，同时确保目标HTML元素使用对应字体：

修改后的代码示例： #

window.jsPDF = window.jspdf.jsPDF;
applyPlugin(window.jsPDF);

// 假设已引入转换后的字体文件，例如noto-sans-turkish.js
function downPdf () {
    let doc = new jsPDF()
    // 注册字体：字体文件标识、自定义字体名、字体样式
    doc.addFont('NotoSansTurkish-Regular', 'NotoSansTurkish', 'normal');
    // 设置PDF默认字体为注册的字体
    doc.setFont('NotoSansTurkish');

    const elementHTML = document.querySelector('#pdf')
    // 强制目标HTML元素使用对应字体（转换时html2canvas会读取这个样式）
    elementHTML.style.fontFamily = 'NotoSansTurkish, sans-serif';

    doc.html(elementHTML, {
        callback: function (doc) {
            doc.save('sample-document.pdf')
        },
        x: 15,
        y: 15,
        width: 170, // target width in the PDF document
        windowWidth: 650 // window width in CSS pixels
    })
}

3. 额外注意事项 #

• 若通过CDN引入字体，需确保字体文件跨域访问权限正常；
• doc.html方法依赖html2canvas，更新到html2canvas最新稳定版可能解决部分字体渲染异常；
• 检查HTML内是否有覆盖字体样式的内联代码，确保目标元素的font-family设置生效。

内容的提问来源于stack exchange，提问作者kadirklc