Puppeteer导入pdf攻略以及踩坑问题

目录

1、下载puppeteer

2、写接口

3、接口方法

4、前端代码

5、遇到的问题

---

 

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools协议控制 Chromium 或 Chrome。Puppeteer 默认以headless模式运行，但是可以通过修改配置文件运行“有头”模式。

实现思路：通过Puppeteer提供的api启动无头浏览器，打开一个新页面，设置视图并且导航到提供的URL

1、下载puppeteer

注意：我用的是16.1.1版本，最开始用的是最新的，不过上测试环境之后，导出会报错，是因为测试环境的node版本低，服务器node版本不能改变，所以只能降级puppeteer。

2、写接口

3、接口方法

首先引入puppetter

async handlePdf({ html, name }) {
        // 打开一个浏览器实例
        const brower = await puppeteer.launch({
            headless: true, // 启动无头浏览器
            devtools: true, // 协议控制
            args: [
                '--disable-gpu', // 表示打开一个禁用GPU加速的浏览器窗口
                '--disable-dev-shm-usage', // 禁止使用/dev/shm，防止内存不够用
                '--disable-setuid-sandbox', // 与--no-sandbox配合
                '--no-first-run', // 禁止首次运行界面
                '--no-sandbox', // 不使用沙箱
                '--no-zygote', // 禁止zygote进程fork子进程
                '--single-process' // 单进程
            ] 
            /*
              args：启动项，为了我们启动一个最小化可用的浏览器实例，其他不需要的功能都禁用掉，这样会大大提升启动速度
              args其他参数地址：https://www.cnblogs.com/hushaojun/p/5981646.html
            */
        })
        // 创建一个空白页面
        const page = await brower.newPage();
        // 设置页面内容
        // waitUntil参数，它就是用来配置这个判断成功的标准，它提供了四个可选值，一般就是networkidle0不用改，其他可自查
        await page.setContent(html, { waitUntil: 'networkidle0' })
        // 设置pdf格式
        await page.pdf({
            format: 'A4',
            scale: 1,
            margin: {
                top: '20px',
                right: '20px',
                bottom: '20px',
                left: '20px'
            },
            path: `download/${name}.pdf`,
        });
        // 关闭浏览器实例
        await brower.close();

        // 输出url
        return {
            url: `${name}.pdf`
        };
    }

4、前端代码

封装接口方法

页面调用

 

5、遇到的问题

• 测试环境导出报错

解决办法：在服务器安装chromium
附上链接：https://wenku.csdn.net/answer/23838f238a468ece88358d1a008f03be

• msg: "Failed to launch the browser process!\n/hm/package/node/help/node_modules/puppeteer/.local-chromium/linux-1022525/chrome-linux/chrome: error while loading shared libraries: libatk-1.0.so.0: cannot open shared object file: No such file or directory\n\n\nTROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md\n"__

解决办法：
附上链接：https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md

• 测试环境，puppeteer导出pdf不显示中文__

解决办法：在服务器安装中文字体包
附上链接：https://zhuanlan.zhihu.com/p/618301670
注意：字体有权限问题，linux没有直接安装途径，如果显示的字体不是你想要的，可以将本地的字体文件夹给运维，让他传到服务器上，就可以了