You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

解决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

火山引擎 最新活动