解决jsPDF AutoTable中阿拉伯语表头显示为乱码/损坏文本的问题
解决jsPDF AutoTable中阿拉伯语表头显示为乱码/损坏文本的问题
我之前做阿拉伯语PDF报表的时候,也碰到过完全一样的表头乱码问题!试了好几个办法才搞定,给你分享几个最有效的解决方案:
1. 给AutoTable显式开启RTL模式
这是最关键的一步!文档级的doc.setLanguage("ar")并不会自动让AutoTable继承RTL渲染规则,必须在AutoTable的配置里单独加rtl: true:
autoTable(doc, { startY: 20, rtl: true, // 新增这个配置,开启AutoTable的RTL布局 head: [ [ "رقم الطلب", "رقم الحساب", "اسم العميل", "الفرع", "الحد الائتماني", "رقم السجل التجاري", "حالة السجل التجاري", "الحالة", ], ], // ... 你的其他配置 });
2. 强化表头的语言与字体配置
有时候表头的渲染上下文会和表格主体不一致,你可以在headStyles里再明确指定语言和字体属性,确保没有遗漏:
headStyles: { fontStyle: "bold", font: "Amiri", halign: "right", useUnicode: true, lang: "ar" // 显式指定表头文本的语言为阿拉伯语 },
3. 验证字体文件的完整性
如果上面两步还没解决问题,那可能是你导入的Amiri字体文件有问题:
- 检查
arabicFont变量是不是完整的Base64编码的Amiri-Regular.ttf文件,有时候复制粘贴时会截断Base64字符串 - 可以尝试换用另一个更稳定的阿拉伯语字体,比如Noto Naskh Arabic,重新生成Base64编码后导入试试
4. 升级依赖版本
旧版本的jsPDF和jspdf-autotable对RTL和非英文字体的支持有不少bug,建议把这两个依赖升级到最新的稳定版,很多奇怪的渲染问题都会随之消失。
我当时就是加了rtl: true之后,表头的乱码立刻就正常显示了,你可以先试这个方案!
备注:内容来源于stack exchange,提问作者Ak98




