如何在jsPDF或同类库中使用盲文字体？解决HTML转PDF盲文显示异常

问题描述 #

将HTML文件转换为PDF时，盲文文本无法正常显示，取而代之的是显示“((((((((”。尝试通过导入自定义盲文字体到jsPDF的方式解决，但未成功，也试过导入部分Google字体。

尝试过的代码 #

function generatePDF(){
    var doc = new jsPDF('p', 'pt', 'a4');
    const myFont = './assets/BrailleNormal-lLDX.ttf'; // load the *.ttf font file as binary string

    // add the font to jsPDF
    doc.addFileToVFS("MyFont.ttf", myFont);
    doc.addFont("MyFont.ttf", "MyFont", "normal");
    doc.setFont("MyFont");
    
    doc.html(document.querySelector('#content'), {
      callback: function(pdf){
        console.log(pdf);
        pdf.save('file.pdf');
      }
    })
}

核心问题与修复方案 #

• 字体加载逻辑错误：addFileToVFS需要传入字体文件的二进制字符串，而非文件路径，原代码直接传路径导致字体未正确加载。
• doc.html()字体继承问题：该方法依赖html2canvas渲染，需确保HTML元素已明确指定使用目标盲文字体，否则会 fallback 到默认字体。

修正后的完整代码 #

async function generatePDF() {
    const doc = new jsPDF('p', 'pt', 'a4');
    
    // 1. 异步加载字体文件的二进制内容
    const fontRes = await fetch('./assets/BrailleNormal-lLDX.ttf');
    const fontBlob = await fontRes.blob();
    const fontBuffer = await fontBlob.arrayBuffer();
    const fontBinaryStr = String.fromCharCode(...new Uint8Array(fontBuffer));
    
    // 2. 注册字体到jsPDF的虚拟文件系统
    doc.addFileToVFS("BrailleNormal.ttf", fontBinaryStr);
    doc.addFont("BrailleNormal.ttf", "BrailleNormal", "normal");
    
    // 3. 给目标HTML元素设置字体
    const content = document.querySelector('#content');
    content.style.fontFamily = 'BrailleNormal, sans-serif';
    
    // 4. 生成并保存PDF
    await doc.html(content, {
        callback: (pdf) => pdf.save('file.pdf'),
        html2canvas: {
            useCORS: true, // 解决跨域资源加载问题
            logging: false
        }
    });
}

额外注意事项 #

• 确认盲文字体文件路径正确，服务器可正常访问该文件，避免跨域拦截。
• 若使用Google字体，需先通过<link>标签在HTML中提前加载，再在jsPDF中注册对应字体名称。
• 部分盲文字体对字符编码有要求，确保你的盲文文本使用字体支持的编码格式。

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