前言
如今，前端工程化已经成为前端开发的基本技能之一。在这个过程中，npm 作为前端打包、编译、压缩、测试等必要工具之一，已然成为前端工程化的标配。
本文将介绍一个适用于前端工程化的 npm 包 puff-screeny，并配以详细的使用教程。该 npm 包可以将网站以及其他 web 应用截图，并提供多种设置选项，具有较高的灵活性和可配置性。
puff-screeny 是什么？
puff-screeny 是一个 npm 包，可以在前端环境中抓取网站截图、生成 PDF 等等功能。puff-screeny 的主要特点是其灵活性和可配置性。通过 puff-screeny，开发者可以很方便地实现对不同界面的截屏、控制截图区域、截图质量、动态渲染高清 PDF 等等功能。
puff-screeny 的使用方法
具体使用方法
安装
使用 npm 进行安装：
npm install puff-screeny
使用
安装成功后，需要引入 puff-screeny，接下来是一些基本的使用示例。
const PuffScreeny = require('puff-screeny');
const config = {
url: 'http://www.example.com',
output: 'test.png'
};
new PuffScreeny(config).capture();这个简单的示例将抓取指定 URL（www.example.com）的截图，并将其保存为 test.png 文件。
下面是一个更加复杂的示例，其中包含了多个搭配使用的功能：
-- -------------------- ---- -------
----- ----------- - ------------------------
----- ------ - -
---- -------------------------
------- -----------
--------- -
------ -----
------- ---
--
---- -
------- --------
-
--
--- ------------------------------在这个示例中，我们将指定 URL 的截图保存为 test.pdf，并且指定了视图大小和 PDF 的格式。viewport 控制截图区域大小，pdf 组件则控制生成 PDF 的格式。
高级功能
除了基本的使用，puff-screeny 还提供了一些高级功能。下面是一些示例：
- 使用 Promise/await
使用 Promise/await 机制来等待异步操作返回结果。这在多个截图或 PDF 生成任务可以并行进行的情况下非常有用。
-- -------------------- ---- -------
----- ------------ - ------------------------
----- ------ - -
---- -------------------------
------- ----------
--
----- ------- - --- ---------------------
----- ------------------- 自定义 puppeteer 选项
可以通过传递 puppeteer 实例的自定义选项来控制 page 对象的构建和页面渲染等操作。
-- -------------------- ---- -------
----- ----------- - ------------------------
----- ------ - -
---- -------------------------
------- -----------
----------------- -
----- ---------------- ---------------------------
-
--
--- ------------------------------- 自定义浏览器实例
通过提供自定义的 Browser 实例对象，可以轻松地连接到现有的浏览器服务（比如 Chrome 的开发者工具），并使用该实例完成页面渲染等操作。
-- -------------------- ---- -------
----- ----------- - ------------------------
----- ------ - -
---- -------------------------
------- -----------
-------- ---------------
--
--- ------------------------------- 捕获全屏
使用 PuffScreeny.captureScreen 将直接截图全屏。
const PuffScreeny = require('puff-screeny');
const config = {
output: 'screenshot.png'
};
PuffScreeny.captureScreen(config);更多配置说明
viewport：指定页面截图的视口大小，通常使用 object 来表示，参考：Page.setViewport(viewport)
device：模拟设备，可以指定模拟设备的名称或者使用预定义的模拟设备配置。查看使用方法：https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js
pdf：指定是否生成 PDF，如果配置了该选项，则屏幕截图将被保存为 PDF 文件。pdf 选项是一个 object，可以配置的参数参考：Page.pdf([options])
结论
在前端工程化中，除了完成基本功能代码的编写，更需要使用 npm 包等工具帮助自己快速完成前端打包、编译、压缩、测试以及界面截图等工作。在这个过程中，puff-screeny 作为一个前端截屏工具安装简单、功能多样的 npm 包，具有较高的灵活性和可配置性，能够有效促进前端工程化的进一步发展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a2181e8991b448d7c54