puppeteer应用

Copy 
1npm i puppeteer

Copy 
1// 截图
2const screenShot = async () => {
3  const browser = await puppeteer.launch();
4  const page = await browser.newPage();
5  await page.goto('https://example.com');
6  const a = await page.screenshot({ path: 'example.png' });
7  await browser.close();
8}

Copy 
1// 执行脚本
2const doScript = async () => {
3  await page.goto('https://www.all1024.com', {
4    waitUntil: 'networkidle2',
5  });
6  await page.pdf({ path: '1024.pdf', format: 'a4' });
7  const dimensions = await page.evaluate(() => {
8    return {
9      width: document.documentElement.clientWidth,
10      height: document.documentElement.clientHeight,
11      deviceScaleFactor: window.devicePixelRatio,
12    };
13  });
14  console.log('Dimensions:', dimensions);
15}

Copy 
1// 自动填表单
2const fillForm = async () => {
3  const browser = await puppeteer.launch();
4  // 调试可见
5  // const browser = await puppeteer.launch({
6  //   headless: false,
7  //   executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
8  //   args: ['--start-maximized']
9  //   //launch这里将浏览器设置为非无头模式，且这里设置启动本机安装的chrome，如果这里不设置，还需要下载chromium，这里请设置你自己本机的chrome浏览器
10  // });
11  const page = await browser.newPage();
12  // 地址栏输入网页地址
13  await page.goto('https://baidu.com/', {
14    waitUntil: 'networkidle2',
15  });
16
17  // 输入搜索关键字
18  await page.type('#kw', '腾讯公司', {
19    delay: 1000, // 控制 keypress 也就是每个字母输入的间隔
20  });
21
22  // 回车
23  await page.keyboard.press('Enter');
24}

Copy 
1const puppeteer = require('puppeteer-extra');
2const repl = require('puppeteer-extra-plugin-repl')();
3
4async function showREPL() {
5  await puppeteer.use(repl);
6  //固定写法，表示puppeteer要使用repl插件
7
8  const browser = await puppeteer.launch({
9    headless: false,
10    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
11    args: ['--start-maximized']
12    //launch这里将浏览器设置为非无头模式，且这里设置启动本机安装的chrome，如果这里不设置，还需要下载chromium，这里请设置你自己本机的chrome浏览器
13  });
14  const page = await browser.newPage();
15  await page.setViewport({
16    width: 1366,
17    height: 768
18  });
19  await page.goto('https://example.com');
20  //默认打开上面的网页
21
22  await page.repl();
23  //在page对象上开启交互的REPL，这样可以实时看到page上提供的方法执行结果，执行效果见下图所示
24
25  //在page对象上开启交互的REPL，这样可以实时看到page上提供的方法执行结果
26
27  await browser.repl();
28  //在browser对象上开启交互的REPL，这样可以实时看到page上提供的方法执行结果
29
30  await browser.close();
31}
32showREPL();

Copy 
1const express = require("express");
2const getPDF = require('./getPDF');
3const getPNG = require('./getPNG');
4
5const app = express();
6const port = 9000;
7
8app.get("/getPDF", async (req, res) => {
9  const { url } = req.query;
10  if (!url) { res.send({ status: 'error', msg: '缺少参数url' }) }
11  const result = await getPDF({ url });
12  res.send(result);
13});
14
15app.get("/getPNG", async (req, res) => {
16  const { url, width: _width } = req.query;
17  if (!url) { res.send({ status: 'error', msg: '缺少参数url' }) }
18  const width = _width ? 1000 : Number(_width);
19  const result = await getPNG({ url, width });
20  res.send(result);
21});
22
23app.listen(port, () => {
24  console.log(`Example app listening at http://localhost:${port}`);
25});

Copy 
1const puppeteer = require('puppeteer');
2const UTILS = require('./utils');
3
4module.exports = async ({ url, name = 'file.png', width = 1366 }) => {
5  const browser = await puppeteer.launch();
6  const page = await browser.newPage();
7  await page.setViewport({
8    width,
9    height: 768
10  });
11  await page.goto(url, {
12    waitUtil: 'networkidle2'
13  });
14  await UTILS.waitTillHTMLRendered(page);
15  console.log('开始截图……')
16  const res = await page.screenshot({ path: name, fullPage: true });
17  console.log('完成截图')
18  await browser.close();
19  return res
20}

Copy 
1const puppeteer = require('puppeteer');
2
3module.exports = async function getPDF({ url }) {
4  const browser = await puppeteer.launch({
5    headless: true,
6    args: [
7      "--no-sandbox", // linux系统中必须开启
8      "--no-zygote",
9      // "--single-process", // 此处关掉单进程
10      "--disable-setuid-sandbox",
11      "--disable-gpu",
12      "--disable-dev-shm-usage",
13      "--no-first-run",
14      "--disable-extensions",
15      "--disable-file-system",
16      "--disable-background-networking",
17      "--disable-default-apps",
18      "--disable-sync", // 禁止同步
19      "--disable-translate",
20      "--hide-scrollbars",
21      "--metrics-recording-only",
22      "--mute-audio",
23      "--safebrowsing-disable-auto-update",
24      "--ignore-certificate-errors",
25      "--ignore-ssl-errors",
26      "--ignore-certificate-errors-spki-list",
27      "--font-render-hinting=medium",
28    ]
29  });
30  // try...catch...
31  try {
32    const page = await browser.newPage();
33    await page.goto(url, {
34      waitUtil: 'networkidle2'
35    });
36    // 页眉模板（图片使用base64，此处的src的base64为占位值）
37    const headerTemplate = ``
38    // 页脚模板（pageNumber处会自动注入当前页码）
39    const footerTemplate = ``;
40    // 对于大的PDF生成，可能会时间很久，这里规定不会进行超时处理
41    await page.setDefaultNavigationTimeout(0);
42    // 定义html内容
43    // await page.setContent(this.HTMLStr, { waitUntil: "networkidle2" });
44    // 等待字体加载响应
45    await page.evaluateHandle("document.fonts.ready");
46    let pdfbuf = await page.pdf({
47      // 页面缩放比例
48      scale: 1,
49      // 是否展示页眉页脚
50      // displayHeaderFooter: true,
51      // pdf存储单页大小
52      format: "a4",
53      // 页面的边距
54      // 页眉的模板
55      // headerTemplate,
56      // // 页脚的模板
57      // footerTemplate,
58      margin: {
59        top: 0,
60        bottom: 0,
61        left: 0,
62        right: 0
63      },
64      // 输出的页码范围
65      pageRanges: "",
66      // CSS
67      preferCSSPageSize: true,
68      // 开启渲染背景色，因为 puppeteer 是基于 chrome 浏览器的，浏览器为了打印节省油墨，默认是不导出背景图及背景色的
69      // 坑点，必须加
70      printBackground: true,
71    });
72    // 关闭browser
73    await browser.close();
74    // 返回的是buffer不需要存储为pdf，直接将buffer传回前端进行下载，提高处理速度
75    return pdfbuf
76  } catch (e) {
77    await browser.close();
78    throw e
79  }
80}

Copy 
1// 判断页面加载完成
2const waitTillHTMLRendered = async (page, timeout = 10000) => {
3  console.log('页面加载中...')
4  const checkDurationMsecs = 1000;
5  const maxChecks = timeout / checkDurationMsecs;
6  let lastHTMLSize = 0;
7  let checkCounts = 1;
8  let countStableSizeIterations = 0;
9  const minStableSizeIterations = 3;
10  while (checkCounts++ <= maxChecks) {
11    let html = await page.content();
12    let currentHTMLSize = html.length;
13    let bodyHTMLSize = await page.evaluate(() => document.body.innerHTML.length);
14    console.log('last: ', lastHTMLSize, ' <> curr: ', currentHTMLSize, " body html size: ", bodyHTMLSize);
15    if (lastHTMLSize != 0 && currentHTMLSize == lastHTMLSize)
16      countStableSizeIterations++;
17    else
18      countStableSizeIterations = 0; //reset the counter
19
20    if (countStableSizeIterations >= minStableSizeIterations) {
21      console.log("页面完成加载!");
22      checkCounts = maxChecks + 2
23      break;
24    }
25    lastHTMLSize = currentHTMLSize;
26    await page.waitForTimeout(checkDurationMsecs);
27  }
28};
29
30
31
32
33module.exports = {
34  waitTillHTMLRendered
35}