从PhantomJS迁移到Puppeteer时PDF样式匹配问题咨询

当前node-horseman/PhantomJS代码 #

let horseManPromise = horseman
  .userAgent('Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0')
  .viewport(1200, 900);

horseManPromise = horseManPromise
  .pdf(pdfTempFilePath, {
    format: paperSize,          // 示例：'A4'
    orientation: documentOrientation, // 示例：'portrait'
    margin: '0cm'
  });

已知背景 #

• PhantomJS基于2015-2016年版本的QtWebKit，继承该版本WebKit的用户代理（UA）样式表；Puppeteer基于Chromium的Blink引擎，使用独立的UA样式表，两者默认样式存在差异。
• PhantomJS的paperSize配置负责控制PDF的纸张尺寸、方向和边距；Puppeteer通过page.pdf的对应参数实现类似功能。

目标Puppeteer等效代码 #

const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.setUserAgent('Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0');
await page.setViewport({ width: 1200, height: 900 });

await page.goto(url, { waitUntil: 'networkidle0' });

await page.pdf({
  path: pdfTempFilePath,
  format: paperSize,
  landscape: documentOrientation === 'landscape',
  printBackground: true,
  margin: { top: '0cm', bottom: '0cm', left: '0cm', right: '0cm' }
});

await browser.close();

核心问题 #

1. 是否有PhantomJS 2.x使用的QtWebKit分支UA样式表的官方或归档副本？
2. 除WebKit UA样式表外，PhantomJS/horseman是否有注入特定CSS默认值（如默认视口样式、打印样式）？
3. 推荐哪些兼容CSS代码片段，使Puppeteer PDF输出尽可能匹配PhantomJS/horseman？

解决方案 #

1. PhantomJS 2.x的QtWebKit UA样式表获取途径

PhantomJS 2.1.13基于Qt 5.5.1对应的WebKit分支，可通过Qt官方归档仓库找到该版本的UA样式表；也能从PhantomJS源码仓库提取对应默认样式文件。此外，部分代码归档站点保存了2015-2016年WebKit版本的html.css副本，可用于对比差异。

2. PhantomJS/horseman的额外默认CSS配置

PhantomJS继承QtWebKit的打印样式规则，比如默认打印元素背景色（早期Chromium默认不打印，需手动开启printBackground）、默认页面边距处理；node-horseman没有额外注入自定义默认CSS，但PhantomJS的webpage模块默认使用print媒体类型渲染PDF，且viewport默认缩放行为与Chromium存在细微差异。

3. 兼容CSS代码片段

在Puppeteer中注入以下CSS，可大幅缩小与PhantomJS的PDF样式差异：

/* 强制打印背景色，匹配PhantomJS默认行为 */
* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* 重置字体与行高，对齐WebKit旧版本默认值 */
body {
  font-family: "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

/* 修复表格默认样式差异：PhantomJS中表格默认使用separate边框模型 */
table {
  border-collapse: separate;
  border-spacing: 2px;
}

td, th {
  padding: 1px 2px;
}

/* 强制纸张尺寸与视口匹配，避免缩放差异 */
@page {
  size: A4 portrait; /* 根据实际纸张格式调整 */
  margin: 0;
}

@media print {
  html, body {
    width: 210mm;
    height: 297mm;
    overflow: hidden;
  }
  /* 移除Chromium默认添加的打印页眉页脚 */
  header, footer {
    display: none !important;
  }
}

注入方式：在page.goto之后、page.pdf之前添加以下代码：

await page.addStyleTag({
  content: `
    /* 上述CSS代码 */
  `
});

内容的提问来源于stack exchange，提问作者Prashant Gupta