生成网页的 PDF

Posted 2023-02-24

【中文标题】生成网页的 PDF

【英文标题】：Generating PDF of a Web Page

【发布时间】：2018-10-18 12:22:36

【问题描述】：

我正在尝试生成一个网页的pdf 文件，并希望保存到本地磁盘以便以后通过电子邮件发送。

我尝试过this 方法，但这里的问题是，它不适用于this 之类的页面。我能够生成pdf，但它与网页内容不匹配。

很明显pdf 是在document ready 之前生成的，或者可能是别的东西。我无法弄清楚确切的问题。我只是在寻找一种可以将网页输出保存为pdf 的方法。

我希望生成网页的pdf 更适合node 然后php？如果php 中的任何解决方案可用，那么这将是一个很大的帮助，甚至节点实现也可以。

【问题讨论】：

可以分享代码吗？

您可能需要设置一个 setTimeout 以确保整个页面，包括它的 javascript 生成的部分在呈现之前准备好...

@xybrek 在发布此问题之前我曾尝试使用 setTimeout，但它也没有用

@Vaviloff 我已经尝试过在“c”here 中提到的相同代码 sn-p，除了我更改了 url

您可以选择生成屏幕截图的位置。只需确保在您执行此操作时文档实际上已准备就绪

【参考方案1】：

我使用html-pdf package做了类似的事情。

代码很简单，可以这样使用：

pdf.create(html, options).toFile('./YourPDFName.pdf', function(err, res) 
        if (err) 
          console.log(err);
        
);

在包裹页面here查看更多信息。

希望对你有帮助。

【讨论】：

我试过了，它似乎只适用于本地 html 文件，但不适用于远程 url

Google 图表未反映到 PDF 中。还有什么方法可以转换图表吗？

【参考方案2】：

很明显，pdf是在文档准备好之前生成的

非常正确，所以需要等到脚本加载并执行之后。

---

您链接到使用 phantom 节点模块的答案。

该模块从那时起进行了升级，现在支持 async/await 函数，使脚本更具可读性。

如果我可以建议使用 async/await 版本的解决方案（版本 4.x，需要节点 8+）。

const phantom = require('phantom');

const timeout = ms => new Promise(resolve => setTimeout(resolve, ms));

(async function() 
  const instance = await phantom.create();
  const page = await instance.createPage();

  await page.property('viewportSize',  width: 1920, height: 1024 );

  const status = await page.open('http://www.chartjs.org/samples/latest/charts/pie.html');

  // If a page has no set background color, it will have gray bg in PhantomJS
  // so we'll set white background ourselves
  await page.evaluate(function()
      document.querySelector('body').style.background = '#fff';
  );

  // Let's benchmark
  console.time('wait');

  // Wait until the script creates the canvas with the charts
  while (0 == await page.evaluate(function() return document.querySelectorAll("canvas").length ) )  
      await timeout(250);
  

  // Make sure animation of the chart has played
  await timeout(500);

  console.timeEnd('wait');

  await page.render('screen.pdf');

  await instance.exit();
)();

在我的开发机器上，等待图表准备好需要 600 毫秒。比await timeout(3000) 或任何其他任意秒数要好得多。

【讨论】：

但我认为这不是理想的解决方案，因为我们不知道页面加载的确切时间！有活动吗？

是的，onLoadFinished。为了简单起见，我没有使用它，但为了节省时间，您绝对应该将主登录移动到此回调中。

我尝试过onLoadFinished，但页面在加载之前正在呈现，here 是示例代码

我的错，onLoadFinished 在这里无关紧要——我们必须等待脚本完成它们的工作。所以我改变了答案，只等待必要的时间，不再等待。