当有 flexbox 时，使用 phantomjs 生成 pdf 的问题答案

【问题标题】：Issue generating a pdf with phantomjs when there is flexbox当有 flexbox 时，使用 phantomjs 生成 pdf 的问题
【发布时间】：2018-07-19 15:47:29
【问题描述】：

有谁知道当网页使用 flexbox 时，使用 phantomjs 生成 pdf 是否有效？

我正在使用这里的示例生成一个 pdf，除了使用 flexbox 的组件之外，它工作得非常好

https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js?utm_content=bufferda3e0&utm_source=buffer&utm_medium=twitter&utm_campaign=Buffer

我还尝试从 www.stackoverflow.com（它对某些 div 使用 flexbox）生成一个 pdf，但我遇到了同样的问题，几乎带有 flexbox 的元素占据了 100% 的宽度并阻止显示其他div 在同一“行”中。

【问题讨论】：

标签： phantomjs

【解决方案1】：

PhantomJS 已经过时了，可以迁移到puppeteer 吗？（是一个 node.js 模块，下面有 Chromium）

https://github.com/GoogleChrome/puppeteer/blob/master/examples/pdf.js

const puppeteer = require('puppeteer');

(async() => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  // page.pdf() is currently supported only in headless mode.
  // @see https://bugs.chromium.org/p/chromium/issues/detail?id=753118
  await page.pdf({
    path: 'hn.pdf',
    format: 'letter'
  });

  await browser.close();
})();

【讨论】：