browserless 屏幕捕捉以及pdf 导出简单试用

基于browserless 以及puppeteer 我们可以快速的进行屏幕捕捉生成图片以及导出pdf 文件，以下是一个简单的试用

环境准备

• docker-compose

version: "3"

services:

   app:

      image: browserless/chrome:latest

      ports:

         - "3000:3000"

• node app

package.json 基于express 的web 服务，同时使用了ncc 进行打包

{

  "name": "appv2",

  "version": "1.0.0",

  "main": "index.js",

  "license": "MIT",

  "dependencies": {

    "express": "^4.19.2",

    "puppeteer-core": "^22.6.5"

  },

  "scripts": {

    "dev":"node index.js",

    "build": "ncc build index.js -o dist"

  },

  "devDependencies": {

    "@vercel/ncc": "^0.38.1"

  }

}

index.js

包含一个image 以及pdf 的get 服务，我们需要传递的是website 查询字符串

const   express = require("express");

const  puppeteer = require("puppeteer-core");

 

const app = express();

 

const browserWSEndpoint = process.env.ENDPOINT ||  "ws://localhost:3000";

 

const getBrowser = async () => puppeteer.connect({ browserWSEndpoint });

 

app.get("/image", async (req, res) => {

  let  browser_local = null;

  const website  = req.query.website;

  await getBrowser()

    .then(async (browser) => {

     browser_local = browser

      const page = await browser.newPage();

      await page.setViewport({ width: 1280, height: 1024 });

      await page.goto(website,{

        waitUntil: ["load",'networkidle0'],

      });

      const screenshot = await page.screenshot({

        fullPage: true,

        captureBeyondViewport: true,

      });

      res.end(screenshot, "binary");

    })

    .catch((error) => {

      if (!res.headersSent) {

        res.status(400).send(error.message);

      }

    })

    .finally(() => browser_local && browser_local.close());

});

 

 

app.get("/pdf", async (req, res) => {

    let browser_local = null;

    const website  = req.query.website;

    await getBrowser()

      .then(async (browser) => {

        browser_local = browser

        const page = await browser.newPage();

        await page.setViewport({ width: 1280, height: 1024 });

        await page.goto(website,{

          waitUntil: ["load",'networkidle0'],

        });

        const screenshot = await page.pdf({

            displayHeaderFooter: true,

            format: "A4",

            printBackground: true,

        });

        res.end(screenshot, "binary");

      })

      .catch((error) => {

        if (!res.headersSent) {

          res.status(400).send(error.message);

        }

      })

      .finally(() => browser_local && browser_local.close());

  });

 

 

app.listen(8080, () => console.log("Listening on PORT: 8080"));

• 效果

图片的

pdf 文件

说明

使用好browserless 可以做不少有意思的东西，值得尝试下

参考资料

https://pptr.dev/api/puppeteer.page.screenshot
https://pptr.dev/api/puppeteer.page.pdf
https://www.browserless.io/
https://github.com/browserless/browserless