使用rialto-php/puphpeteer生成PDF如何按语言切换RTL/LTR方向

问题原因 #

Puphpeteer 是对 Node.js 版 Puppeteer 的PHP封装，而 Puppeteer 官方提供的pdf()方法原生不支持direction配置项，你传入的这个参数会被直接忽略，因此无法生效。

解决方法 #

方法一：完善HTML侧样式适配 #

你已经在HTML页面完成了方向适配，导出PDF不生效大概率是样式仅对screen媒体生效，导出PDF时Chromium默认调用print媒体的样式，需要调整样式适配所有媒体类型：

/* 移除样式上的媒体限制，或者单独补充print媒体的样式 */
html {
  /* 根据页面语言动态切换dir属性即可自动匹配方向 */
  &[dir="rtl"] {
    direction: rtl;
    unicode-bidi: embed;
  }
  &[dir="ltr"] {
    direction: ltr;
  }
}
/* 如果存在全局打印样式重置了方向，需要手动覆盖打印场景的方向配置 */
@media print {
  html[dir="rtl"] {
    direction: rtl !important;
  }
}

只要页面dir属性是根据语言动态赋值的，导出PDF时会自动继承页面的方向配置，不需要额外在PDF参数里传配置。

方法二：PHP侧动态控制页面方向 #

如果需要在PHP逻辑中根据语言动态切换方向，不需要修改HTML模板，可以在调用导出PDF方法前，先执行页面脚本修改根元素的方向属性：

// 判断当前内容语言，阿拉伯语场景执行以下两行代码
$page->evaluate('document.documentElement.setAttribute("dir", "rtl")');
$page->evaluate('document.documentElement.style.direction = "rtl"');

// 英语场景则改为ltr即可
// $page->evaluate('document.documentElement.setAttribute("dir", "ltr")');
// $page->evaluate('document.documentElement.style.direction = "ltr"');

// 再执行PDF导出，删除无效的direction参数
$page->pdf([
    'path' => public_path(sprintf('pdf/reports/%s.pdf', 替换为你的文件名变量)),
    'printBackground'=> true,
    'format'=> "A4",
    'margin' => [
        'top'=> "0px",
        'bottom'=> "0px",
        'left'=> "0px",
        'right'=> "0px",
    ],
]);

注意事项 #

• 导出PDF前需要确保页面内容和样式已经全部加载完成，避免样式未完全生效。
• 如果页面使用了flex、grid等布局，不需要额外调整布局方向，根元素设置dir="rtl"后浏览器会自动适配布局排序规则。

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