node.js - 使用 puppeteer 生成包含多个页面的 PDF

标签 node.js reactjs puppeteer

我创建了一个 React 应用程序和 nodejs 服务器。 我的 puppeteer 师有一个大问题。 我想创建一个包含多个页面的 PDF。 但是当呈现 PDF 时,我只有一页,而不是所有内容。

我正在使用 puppeteer v-4.0.0

有人可以帮我吗? 谢谢enter image description here

最佳答案

你隐藏了这个例子的代码,因此我不能 100% 知道发生了什么。

有两种方法可以做到这一点。您可以将 Web 应用程序的所有内容添加到一个页面中,或者让 Puppeteer 循环浏览一系列页面。创建多个页面的想法与 CSS 分页媒体有关。换句话说,如果一个网站已经为一个给定的文档打印了多个页面,Puppeteer 就会跟进并做同样的事情。

简而言之,当您以用户身份在 Chrome 中简单地执行此操作时,您就知道您的打印件何时准备就绪:

window

Control + P > 点击打印按钮

苹果

Command + P > 点击打印按钮

所见即所得。

然而,如果您的代码指示 headless 浏览器表现为屏幕,例如await page.emulateMediaType('screen'); 在某些情况下,您最终会得到一大块 PDF,类似于用户尝试使用 Chrome 打印该页面时所做的事情。

如果您要打印文档之类的东西,也许修改打印页面的概念是个不错的主意。例如,打印页面将知道如何收集所有文档并将其全部打包成一种格式,然后可以在以后打印。这会生成一个 PDF 文件,然后您可以从客户端完全控制。

但有时,这种捆绑可能过于繁琐或不理想,然后您将不得不像这样遍历页面:

const pages = [
   'relative-path-1',
   'relative-path-2',
   'relative-path-3'
];

let index = 0;

for (let link of pages){
  index++;
  await page.goto('the website address' + link);
  await page.pdf({
    path: 'Page-' + index + '.pdf'
  });
}

关于node.js - 使用 puppeteer 生成包含多个页面的 PDF,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62533048/

相关文章:

node.js - 启动前从文件夹中读取文件

node.js - AWS EC2 上的 React 前端?

javascript - 在 Puppeteer 中访问 javascript 变量

javascript - PDF A4 页面中的网站内容不响应

node.js - Nodejs 中将毫秒转换为格式化日期

javascript - 等待 JavaScript 返回 API 结果

javascript - 将任何起始字符实例替换为空字符串

javascript - 图表显示不正确

javascript - ReactJS:类型数组的状态在重新渲染期间被解构为元素

node.js - 无法让 Puppeteer 工作和安装