HTML转PDF后阿拉伯字母断开问题：阿拉伯文仿生阅读文本转换项目故障排查

这个问题我之前也碰到过，核心原因是你用的html-pdf库依赖的PhantomJS引擎对阿拉伯语这类右到左（RTL）连写文字的排版支持非常不完善。阿拉伯语字母需要根据上下文连接成整体，但PhantomJS的旧渲染引擎无法正确处理这些字符的连写规则，导致HTML里正常显示的内容到PDF里就断开了。

下面是几个可行的解决方案，按优先级排序：

1. 替换html-pdf为更现代的PDF生成库 #

html-pdf已经多年没有维护，对现代排版（尤其是RTL语言）的支持很差。推荐换成基于Chrome内核的Puppeteer，它对阿拉伯语的连写和RTL排版支持完全符合标准。

步骤： #

首先安装Puppeteer：

npm install puppeteer

然后替换你的generatePdf函数为以下代码：

import puppeteer from 'puppeteer';

const generatePdf = async (template) => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 加载HTML内容，等待所有资源加载完成确保排版正确
  await page.setContent(template, { waitUntil: 'networkidle0' });
  
  // 生成PDF，配置格式和边距
  await page.pdf({
    path: './generated-bionic.pdf',
    format: 'Letter',
    margin: { top: '.5in' }
  });
  
  await browser.close();
  console.log('PDF生成成功！');
};

2. 优化HTML模板的RTL排版设置 #

不管用哪个库，正确的HTML/CSS设置都是确保阿拉伯语正常显示的关键。修改你的HTML模板，添加以下配置：

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      /* 使用支持阿拉伯语连写的字体，避免系统默认字体不兼容 */
      font-family: 'Amiri', 'Noto Naskh Arabic', 'Arial', sans-serif;
      /* 强制启用连写和上下文替代特性 */
      font-feature-settings: "calt" 1, "liga" 1, "kern" 1;
      line-height: 1.8;
    }
    b {
      font-weight: 700;
    }
  </style>
</head>
<body>
  <!-- 这里插入转换后的仿生阅读文本 -->
  {bionicText}
</body>
</html>

3. （可选）调整阿拉伯语的仿生文本转换逻辑 #

注意：阿拉伯语是逻辑顺序存储，视觉顺序反向的语言。你当前的transform函数是按字符串的逻辑顺序截取前半部分加粗，但视觉上这会是单词的后半部分。如果你的需求是视觉上的前半部分加粗，需要先处理字符的视觉顺序，可以借助专门的双向文本处理工具，比如rtl-detect或者手动反转字符顺序后再截取。

示例调整后的transform函数：

const transform = (text) => { 
  let bionicText = ''; 
  const words = text.split(" ");
  
  for (const word of words) {
    // 反转单词得到视觉顺序，截取前半部分加粗后再反转回来
    const reversedWord = word.split('').reverse().join('');
    const len = Math.ceil(reversedWord.length / 2);
    const boldPart = reversedWord.slice(0, len).split('').reverse().join('').bold();
    const normalPart = reversedWord.slice(len).split('').reverse().join('');
    bionicText += boldPart + normalPart + " ";
  }
  
  return bionicText.trim(); 
}

为什么这些方法有效？ #

• Puppeteer使用Chrome的渲染引擎，完全支持现代CSS排版特性和RTL语言的连写规则；
• 指定支持阿拉伯语的字体和启用font-feature-settings确保字母能正确连接；
• 调整转换逻辑可以让加粗部分符合阿拉伯语的视觉阅读习惯。

内容的提问来源于stack exchange，提问作者Muhammad Abd-Elsattar