在客户端和服务器端都可以生成PDF文件,puppete

时间:2020-01-22 14:47来源:美高梅游戏网站
浏览器开发人员工具为网站和Web应用程序的底层提供了许多惊人的选择。这些功能可以通过第三方工具进一步增强和自动化。在本文中,我们将研究Puppeteer,这是一个用于Chrome/ Chromiu

浏览器开发人员工具为网站和Web应用程序的底层提供了许多惊人的选择。这些功能可以通过第三方工具进一步增强和自动化。在本文中,我们将研究Puppeteer,这是一个用于Chrome / Chromium的基于节点的库。

时间: 2019-03-31阅读: 421标签: pdf

puppeteer

puppeteer 是一个通过DevTools 协议提供高级API 来控制 chrome,chromium 的 NODE库; puppeteer默认运行在 headless 模式, 也可配置后运行在全模式(non-headless).

一个Node库,它提供了高级API来通过DevTools协议控制Chrome或Chromium。Puppeteer默认情况下无头运行,但可以配置为运行完整的Chrome或Chromium。

在本文中,我将展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 从样式复杂的 React 页面生成 PDF 文档。

puppeteer可以做什么

大部分在浏览器里手动执行的动作都可以通过puppeteer实现! 这里有几个列子来让你开始.

  • 生成页面截图和PDF.
  • 爬取单页面应用生成提前渲染的内容(例如 SSR).
  • 自动提交表单, UI测试, 键盘输入等.
  • 创建最新的自动化的测试环境,在最新的 chrome 里使用 js 和浏览器的最新特性来运行你的测试.
  • 捕获网站的跟踪时间线以帮助诊断性能问题.

Puppeteer由Google Chrome背后的团队开发,因此您可以肯定它将得到很好的维护。它使我们能够通过一个简单易用的API通过JavaScript以编程方式在Chromium浏览器上执行常见操作。

背景:几个月前,一个客户要求我们开发一个功能,用户可以得到 PDF 格式的 React 页面内容。该页面基本上是患者病例的报告和数据可视化结果,其中包含许多 SVG。另外还有一些特殊的请求来操纵布局,并对 HTML 元素进行一些重新排列。因此与原始的 React 页面相比,PDF 中应该有不同的样式和额外的内容。

开始

使用Puppeteer,您可以:

由于这个任务比用简单的 CSS 规则解决要复杂得多,所以我们先探讨了可能的实现方法。我们找到了 3 个主要解决方案。这篇博文将指导你了解它们的可能性并最终实施。

安装

为了在你的项目里使用puppeteer, 执行:

npm i puppeteer
# 或者 yarn add puppeteer

提示: 安装puppeteer是,会下载最新版本的chromium(Mac下170 M, Windows下282M))以保证API正常工作. 要跳过这一步,请参阅环境变量().

生成网站截图,包括SVG和Canvas

在客户端还是服务器端生成?

例子

提示: puppeteer需要 Node V6.4.0及以上版本, 但以下例子中使用了在Node V7.60及以上版本中的 async/await .

使用过其它浏览器测试框架的人对puppeteer也会熟悉. 创建Browser实列, 打开页面,然后使用puppeteer API操作页面.

使用标准DOM API访问网页并提取信息

在客户端和服务器端都可以生成PDF文件。但是让后端处理它可能更有意义,因为你并不想耗尽用户浏览器可以提供的所有资源。

Example - 导航到 截图后保存为example.png.

保存如下文件为 example.js

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

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

执行下面命令 node example.js

puppeteer 设置出时页面尺寸为 800 x 600px ,截图尺寸也是这个. 通过Page.setViewport() 设置个性化页面尺寸.

生成预渲染的内容-即服务器端渲染

即便如此,我仍然会展示这两种方法的解决方案。

Example - 创建PDF

文件保存为hn.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'});
  await page.pdf({path: 'hn.pdf', format: 'A4}');

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

执行如下命令 node hn.js, 查看 Page.pdf() API 寻找更多关于创建PDF的信息.

像Cypress一样自动化UI测试

方案1:从 DOM 制作屏幕截图

Example - 在页面上下文中执行js

保存为 get-dimensions.js

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    }
  })
})()

执行如下命令 node get-dimensions.js, 查看Page.evaluate() API 获取关于evaluate和相关方法 (如:evaluateOnNewDocument, exposeFunction)的详细信息.

Puppeteer并没有Selenium,PhantomJS之类的东西做任何新的事情,但是它提供了一个简单易用的API,并提供了很好的抽象性,因此我们不必担心问题的实质。细节处理。

乍一看,这个解决方案似乎是最简单的,事实证明的确是这样,但它有其自身的局限性。如果你没有特殊需求,例如在 PDF 中选择文本或对文本进行搜索,那么这就是一种简单易用的方法。

手机美高梅游戏网址,运行时的默认设置

  1. 使用无头浏览器模式(headless)

puppeteer 运行chromium 在headless模式下. 当运行浏览器时设置'headless' 选项使chromium运行在全模式下.

const browser = await puppeteer.launch({headless: false});
  1. 绑定特定版本的chromium

默认情况下,puppeteer下载使用指定版本的 chromium 以保证所有的API正常工作. 创建Browser实例时指定 executablePath值来以使用不同浏览器.

const browser = await puppeteer.launch({executablePath: '/path/to/Chrome'})

查看puppeteer.launch() API了解更多信息.

阅读这篇文章了解chromium和 Chrome 的不同, 描述了Chrome和 chromium 在Linux下的不同.

  1. 创建一个新用户

puppeteer每次运行时先创建一个 chromium 用户, 运行结束后就清除用户信息.

它也得到了积极的维护,因此Chromium支持ECMAScript的所有新功能。

此方法简单明了:从页面创建屏幕截图,并把它放到 PDF 文件中。非常直截了当。我们可以使用两个包来实现:

API文档

探索API 文档和例子来学习更多.

先决条件

Html2canvas,根据 DOM 生成截图jsPdf,一个生成PDF的库

调试技巧

  1. 关闭无头模式 - 有时观看浏览器的显示是有用的. 使浏览器运行在全模式而不是无头模式下, 使用headless: false:
const browser = await puppeteer.launch({headless: false,})
  1. 慢下来 - slowMo 选项减慢puppeteer 执行速度, 减慢指定的总毫秒数. 这是帮助观察发生什么的另一个途径.
const browser = await puppeteer.launch({
  headless: false,
  slowMo: 250 //减慢puppeteer 250ms
});
  1. 捕获控制台输出 - 监听console事件. 当调试page.evaluate() 内部代码时比较便利.
page.on('console', msg => console.log('页面log', msg.text()));
await page.evaluate(() => console.log(`url is ${location.href}`))
  1. 停止执行测试,在浏览器内使用debugger
  • 运行puppeteer时使用 {devtools: true}:
const browser = await puppeteer.launch({devtools: true});
  • 改变测试超时时间:
    • jest: jest.setTimeout(100000);
    • jasmine: jasmine.DEFAULT_TIME_INTERVAL = 100000;
    • mocha: this.timeout(100000); (改变测试时使用 function 不能使用箭头函数)
  • 在evaluate内部使用 debugger 语句, 在已存在的evaluate环境中添加 debugger
await page.evaluate(() => {
  debugger;
});

puppeteer测试将会停止在上面这条语句, chromium也将停留在 debugger 模式.

  1. 打开详细记录 - 调用所有公共API 和内部传输协议将会被puppeteer命名空间下的 debug模块记录
# 基本的详细记录
 env DEBUG="puppeteer:*" node script.js

 # 调试输出可通过命名空间来开关
 env DEBUG="puppeteer:*,-puppeteer:protocol" node script.js # 记录除了协议信息的所有信息
 env DEBUG="puppeteer:session" node script.js # 记录会话协议(protocol messages)
 env DEBUG="puppeteer:mouse,puppeteer:keyboard" node script.js # 只记录鼠标和键盘API调用

 # 传输协议记录的比较繁杂. 下面例子过滤所有网络信息.
 env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'

对于本教程,您需要JavaScript,ES6 +和Node.js的基础知识。

开始编码:

为puppeteer贡献

查看贡献指南 以了解puppeteer开发概述

您还必须已经安装了最新版本的Node.js的。

npm install html2canvas jspdf

FAQ(常见问题)

yarn在本教程中,我们将一直使用。如果yarn尚未安装,请从此处安装。

import html2canvas from 'html2canvas'import jsPdf from 'jspdf' function printPDF () { const domElement = document.getElementById('your-id') html2canvas(domElement, { onclone: (document) = { document.getElementById('print-button').style.visibility = 'hidden'}}) .then((canvas) = { const img = canvas.toDataURL('image/png') const pdf = new jsPdf() pdf.addImage(imgData, 'JPEG', 0, 0, width, height) pdf.save('your-filename.pdf')})

谁维护puppeteer?

Chrome DevTools团队维护这个库, 同时欢迎大家的参与!

为了确保我们在同一页面上,这些是本教程中使用的版本:

就这样!

puppeteer的目标和职责是什么?

这个项目的目标是:

  • 提供一个精简和权威的库以突出 DevTools Protocol 的能力
  • 为类似的测试库提供实现参考. 最终其它框架可以采用puppeteer作为基础层.
  • 发展采用 无头,自动化 浏览器测试.
  • 帮助DevTools Protocol 新特性做 dogfood 测试, 捕获bug
  • 寻找浏览器自动化测试的痛点, 然后帮助解决这些差别.

我们采用chromium职责来帮助我们驱动产品做决定:

  • 快速: puppeteer在一个自动化测试页面的性能开销几乎为0.
  • 安全: puppeteer在 Chromium 操作过程中,自动使潜在的恶意页面安全.
  • 稳定: puppeteer不是脆弱的,也不会有内存泄漏
  • 简易: puppeteer 提供易用易理解和调试的高级API.

Node 12.12.0

请注意html2canvas的onclone方法。当你在截图之前需要操纵 DOM(例如隐藏打印按钮)时,它是非常方便的。我看到过很多使用这个包的项目。但不幸的是,这不是我们想要的,因为我们需要在后端完成对 PDF 的创建工作。

Puppeteer是用来取代Selenium/webDriver的吗?

不是, 这两个项目因为一些不同的原因都是有价值的.

  • Selenium/WebDriver 集中于自动跨浏览器; 它的价值在于提供一个在所有主要浏览器里工作的单一标准API.
  • Puppeteer 专注于Chromium;它的价值在于丰富的功能和高可靠性.
    也就是说,你可以使用puppeteer在非Chromium浏览器里运行测试. 例如使用community-driver jest-puppeteer. 虽然puppeteer不是你唯一可用的解决方案,但确实有几分比web Driver好的特点:
  • puppeteer 可以零设置,附带特定版本的chromium是其更好的工作,puppeteer开始使用非常容易,在一天结束时只在chromium上运行几个测试比不测试好.
  • puppeteer 是事件驱动架构, 移除大量潜在脆弱环节. 不需要在puppeteer脚本调用邪恶的"sleep(1000)"
  • puppeteer 默认运行在headless模式下,使得启动非常快. puppeteer V1.5.0 也暴露出浏览器上下文, 使高效的并行执行测试成为可能.
  • puppeteer 在调试时高亮: 翻转headless位 false ,设置slowMo选项, 将会看到浏览器的行为. 甚至可以打开Chrome DevTools来检查测试环境.

yarn 1.19.1

方案2:只使用 PDF 库

为什么puppeteer V.xxx 不能和Chromium V.yyy一同工作?

puppeteer作为 chromium 不可分割的一部分. 每个版本的puppeteer绑定于一个特定版本的 chromium以保证 puppeteer工作.

着并不是通过人工来约束,许多puppeteer工作确实在 chromium 仓库里.下面时典型故事:

  • puppeteer bug报告
  • 这原本是DevTools protocol的 issue, 然后在chromium里修复
  • 当bug修复后,滚动更新chromium到 puppeteer

然而,通常人们更愿意将puppeteer 和官方的Google Chrome一同使用.这种情况下需要选择特定版本的puppeteer以使chromium版本接近chrome.

puppeteer 2.0.0

NPM上有几个库,如 jsPDF(如上所述)或PDFKit。他们的问题是,如果我想使用这些库,我将不得不重新调整页面结构。这肯定会损害可维护性,因为我需要将所有后续更改应用到 PDF 模板和 React 页面中。

puppeteer使用哪个版本的 chromium?

在puppeteer相关版本的package.json文件里查看.

安装

请看下面的代码。你需要亲自手动创建 PDF 文档。你需要遍历 DOM 并找出每个元素并将其转换为 PDF 格式,这是一项繁琐的工作。必须找到一个更简单的方法。

什么是导航(navigation)?

在puppeteer观点中, '导航(navigation)' 是所有改变页面URL的事物. 除了常规的导航外,在浏览器中点击网络从web服务器中获取新文档, 包含a标签导航和history API

在这个navigation定义中, puppeteer和单页面应用无缝衔接.

要在项目中使用Puppeteer,请在终端中运行以下命令:

doc = new PDFDocumentdoc.pipe fs.createWriteStream('output.pdf')doc.font('fonts/PalatinoBold.ttf') .fontSize(25) .text('Some text with an embedded font!', 100, 100) doc.image('path/to/image.png', { fit: [250, 300], align: 'center', valign: 'center'}); doc.addPage() .fontSize(25) .text('Here is some vector graphics...', 100, 100) doc.end()

信任的和不信任的输入事件有什么不同?

在浏览器中输入事件被分为两大类: 信任的和不被信任的.

  • 信任事件: 通过页面的用户接口产生. 例如使用鼠标和键盘.
  • 非信任事件: 通过web API产生. 例如document.createEvent 或者 element.click() 方法.

网站能够区分这两类事件:

  • 使用 Event.isTrusted事件标志.
  • 嗅探伴随事件. 例如每一个可信任的点击事件之前都是'moussedown' 和'mouseup'事件.

为了自动化的目的, 生成可信任事件是比较重要的. 通过puppeteer生成的输入事件都是可信任事件和触发适当的伴随事件.如果需要非信任事件,需要通过page.evaluate 在页面上下文中生成模拟事件:

await page.evaluate(() => {
  document.querySelector('button[type=submit]').click();
})
$yarnaddpuppeteer

这段代码段来自 PDFKit 文档。但是如果你的目标是直接生成一个 PDF 文件,而不是对一个已经存在的(并且不断变化的)HTML 页面进行转换,它还是很有用的。

puppeteer不支持什么特性?

你也许会发现当puppeteer控制包含audio和video的页面时一些行为不是预期的.(例如, 视频播放时截图会失败), 这有以下两个原因:

  • Puppeteer 是和chromium绑定的,并不是chrome, 所以puppeteer继承了 chromium所有限制. 这意味着puppeteer 不支持一些许可格式例如: AAC和 H.264(然而也可能强制puppeteer使用, 当 通过executablePath选项使用chrome替代chromium时. 只有在官方发布的chrome支持这些媒体格式时才能使用这些配置)
  • 自从puppeteer控制chromium/chrome的桌面版后,只在手机版本里的chrome特性不被支持. 这意味着puppeteer不支持 http Live Streaming(HLS).

注意:安装Puppeteer时,它会下载保证可与该API一起使用的Chromium的最新版本(〜170MB macOS,〜282MB Linux,〜280MB Win)。要跳过下载,请参阅环境变量。

最终方案3:基于 Node.js 的 Puppeteer 和 Headless Chrome

在测试环境中安装运行puppeteer时存在问题?

我们有一份针对不同操作系统的排错指南需求列表.

如果您不需要下载Chromium,则可以安装:puppeteer-core

什么是Puppeteer?其文档中写道:

如何使用puppeteer的提前版本?

npm i --save puppeteer@next

提示: 提前版本可能不稳定和包含bugs.

$yarnaddpuppeteer-core

Puppeteer 是一个 Node 库,它提供了一个高级 API 来控制 DevTools 协议上的 Chrome 或 Chromium。 Puppeteer 默认以 headless 模式运行 Chrome 或 Chromium,但其也可以被配置为完整的(non-headless)模式运行。

还有更多问题,到哪里寻求帮助?

这里有许多关于puppeteer帮助的路径:

  • bugtracker
  • stackoverflowh
  • slack channel

确保在提交你的问题之前在这些频道里搜索问题.

puppeteer-core旨在成为Puppeteer的轻量级版本,用于启动现有的浏览器安装或连接到远程浏览器。确保您安装的puppeteer-core版本与您打算连接的浏览器兼容。

它本质上是一个可以从 Node.js 运行的浏览器。如果你读过它的文档,其中首先提到的就是你可以用 Puppeteer 来生成页面的截图和PDF。优秀!这正是我们想要的。

注意:仅从1.7.0版发布。puppeteer-core

先用npmi i puppeteer安装 Puppeteer,并实现我们的功能。

编辑:美高梅游戏网站 本文来源:在客户端和服务器端都可以生成PDF文件,puppete

关键词:

  • 上一篇:没有了
  • 下一篇:没有了