基于Puppeteer实现动态渲染的网页截图

流氓凡 资源分享 2023-03-16 4.12 K 0

为什么使用Puppeteer?

实现网页截图有很多种无头浏览器自动化解决方案,其中包括熟知的有:

Selenium:一款非常流行的自动化测试工具,支持多种编程语言和多种浏览器,包括 Chrome、Firefox、Safari、IE 等。功能强大的Chrome自动化工具

PhantomJS:一个已经停止维护的无头浏览器,虽然已经停止更新,但仍然可以使用。不可以截图动态渲染的页面,如VUE开发的站点

Zombie.js:一个使用 Node.js 实现的无头浏览器,提供了基本的浏览器功能,支持 JavaScript、CSS、HTML5 和 WebSockets 等技术。不可以截图动态渲染的页面,如VUE开发的站点

上诉对比来讲,对于简单网页截图来讲,服务器部署方便,内存占用小,API完善是比较好。

环境部署

以下命令使用ubuntu 20.x系统演示,Centos自行搜索相关的yum命令


安装Nodejs 14.16.x-14.18.x,如果你是M芯片的Mac用户最好使用14.18.x,不然打包后的依赖可能不兼容。

然后安装Chromium浏览器:Chromium浏览器是Puppeteer的依赖,需要先安装Chromium浏览器。

apt install chromium-browser

安装中文字体:Chromium浏览器可能需要一些中文字体才能正确显示中文网页。使用以下命令安装中文字体。

apt install fonts-wqy-zenhei

代码实现:

// 启动Headless Chrome浏览器
    const browser = await puppeteer.launch({
        args: ['--no-sandbox'],
        timeout: 30000
    });
    try {
        // 打开一个新页面
        const page = await browser.newPage();
        // 导航到目标网页,并等待页面加载完成, 时间5秒
        await page.goto(url, {waitUntil: 'networkidle0', timeout: 10000});
        // 截取屏幕截图
        let timeout = 5500; // 超时时间
        const screenshotPromise = page.screenshot({type: 'png', fullPage: true});
        const result = await Promise.race([
            screenshotPromise,
            new Promise((_, reject) =>
                setTimeout(() => reject(`截图超时(${timeout}ms)!`), timeout)
            ) // 超时Promise对象
        ]);
        fs.writeFileSync(filePath, result); // 将截图Buffer对象写入文件
        console.log(`截图已保存为 ${filePath}。`);
    } catch (error) {
        // 输出错误信息文字
        console.log(`截图失败:${error.message}`);
    } finally {
        await browser.close(); // 关闭浏览器
    }

上面代码已经实现了将网页(包括Vue渲染的动态网页)截图保存到指定的本地目录下。并且此代码片段已经托管到GitHub平台,项目地址:https://github.com/RipperTs/dynamic-webpages

项目运行后会以接口的形式对外提供,查看接口文档说明

评论