一个比phantomjs更好的网页截图工具puppeteer

一、安装

最近的需求是需要截取网页上的图表，然后放到word里。所以第一个选择的是phantomjs，但是发现有一些图表是完全截取不了。截下来发现是一个透明的图，截了个寂寞。所以我选择换一个方式：使用puppeteer来实现。因为这是一个基于Nodejs来实现的东西，所以第一步是下载安装Nodejs。

Nodejs的安装

1、nodejs的官网：https://nodejs.org/en/ 下载对应的包，msi是安装包，zip是免安装压缩包，根据需求下载，我的是zip包。

2、下载好之后在node_modules同级的目录创建node_cache和node_global目录；
3、 设置环境变量：在Path添加分别添加
D:\Node\install
D:\Node\install\node_global
D:\Node\install\node_global\node_modules
4、(全局视情况而定，也可以不执行)执行两条命令：
npm config set prefix"D:\Node\install\node_global"
npm config set cache"D:\Node\install\node_cache"
在nodejs的安装目录中找到node_modules\npm.npmrc文件，修改如下：
prefix = D:\Node\install\node_global
cache = D:\Node\install\node_cache
5、分别在安装目录下和其他随便一个地方打开cmd验证是否安装成功，输入命令：node -v 和 npm -v 会出现版本号，表示安装成功。

puppeteer的安装

安装好Nodejs之后就直接运行命令：npm install puppeteer 如果要安装全局的就得 npm install puppeteer -g 接下来就是等待了，时间有点长。如果太久或者安装失败，可自行映射taobao镜像再安装。

正文

1、创建一个Text.js内容如下：
注意：这里如果使用require(‘puppeteer’)报错 Error: Cannot find module ‘puppeteer’ 可以用绝对路径来解决，或者全局的时候出了问题，自行调试。

// const puppeteer = require('puppeteer'); // 全局
const puppeteer = require('D:/Node/install/node_global/node_modules/puppeteer'); // 绝对路径
(async () => {
    const browser = await puppeteer.launch();
const page = await browser.newPage();
// 设置透明
page._emulationManager._client.send(
            'Emulation.setDefaultBackgroundColorOverride',
            { color: { r: 0, g: 0, b: 0, a: 0 } }
        );
// 访问路径
await page.goto('localhost:8080/home/index.html');
// 获取指定id下的模块
let img = await page.$('#img');
await qxqk_echart.screenshot({
        path: 'img.png'
    });
await browser.close();
})();

2、执行命令 node Text.js

3、得到结果