使用pdfmake与Vanilla JavaScript生成PDF时阿拉伯文本显示错乱反转

问题分析 #

阿拉伯语作为RTL（从右到左）语言，pdfmake需要正确处理字符顺序、连写规则以及字体嵌入。你已配置rtl: true和direction: 'rtl'但仍出现反转，核心原因大概率是字体未正确嵌入，或是RTL配置优先级不足导致。

解决方案 #

1. 确保字体正确嵌入（关键） #

直接引用本地字体文件可能因路径、跨域或加载顺序问题，导致pdfmake无法加载指定字体，回退到不支持阿拉伯语RTL的默认字体。建议将字体转换为Base64编码后嵌入：

• 把UthmanTahaNaskh.ttf转换为Base64（可通过在线Base64编码工具处理）
• 修改字体配置：

pdfMake.fonts = {
  Naksh: {
    normal: 'data:font/truetype;base64,[替换为你的字体Base64编码]',
    bold: 'data:font/truetype;base64,[替换为你的字体Base64编码]',
    italics: 'data:font/truetype;base64,[替换为你的字体Base64编码]',
    bolditalics: 'data:font/truetype;base64,[替换为你的字体Base64编码]',
  }
};

2. 强化RTL配置优先级 #

将RTL配置同时应用到全局默认样式和文本对象上，确保生效：

var arabicText = document.getElementById(id2).getElementsByTagName("p")[0].textContent;

// 可选：先测试硬编码文本是否正常，排除DOM文本获取问题
// var arabicText = "النَّهَاوَنْدِيُّ سَنَةَ ثَلَاثٍ وَسَبْعِينَ وَمَائَتَيْنِ";

var docDefinition = {
  content: [
    { 
      text: arabicText, 
      style: "arabic",
      rtl: true // 直接在文本对象上强制启用RTL
    },
  ],
  styles: {
    arabic: {
      font: "Naksh",
      alignment: "right",
      direction: "rtl",
      rtl: true,
    },
  },
  defaultStyle: {
    rtl: true // 全局默认开启RTL处理
  }
};
pdfMake.createPdf(docDefinition).download("myDocument.pdf");

3. 验证文本来源 #

如果硬编码阿拉伯文本能正常显示，说明从DOM获取的textContent可能存在顺序问题，尝试改用innerText获取：

var arabicText = document.getElementById(id2).getElementsByTagName("p")[0].innerText;

4. 升级pdfmake版本 #

旧版本pdfmake对RTL语言的处理存在bug，建议升级到最新稳定版。

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