前端生成PDF最佳实践 - puppeteer

前端生成PDF如果要与后端配合修改生成状态之类的操作，需要起一个node服务。推荐使用express脚手架构建node服务。

前端生成PDF如果不需要与后端配合，只需要一个装包执行js即可。

以下要以起node服务为例，文章最后会提供 node 服务包

装 nodejs 和 yarn 就不再多说了

一、首先安装包

yarn add puppeteer

二、修改 routes/index.js

var express = require('express');
var router = express.Router();
// var instance = require('./instance');
var HttpUtil =require("./HttpUtil");
const puppeteer = require('puppeteer');
router.get('/', function(req, res, next) {
   res.render('index', { title: 'Express' });
});
router.get('/generate', function (req, res, next) {
    const { id, protocol, host, context, name } = req.query;
    console.log(protocol, host)
    function to(promise) {
        return promise.then(data => {
            return [null, data];
        }).catch(err => [err]);
    }
    async function pdf(){
        const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });
        console.log("打开chrome")
        const page = await browser.newPage();
        console.log("打开新标签页")
        // 前往前端写好的页面
        await page.goto("https://www.baidu.com/", { waitUntil: "networkidle2" });
        console.log("进入指定页面后")
        //await page.waitFor(".allstatic");
        console.log("指定页面渲染结束")
        // 下载pdf
        // await page.emulateMedia('screen');
        console.log("生成pdf开始");
        await page.pdf({ path: "../../media/export_files/" + name + ".pdf", margin: { top: "10px", right: "15px", left: "15px", bottom: "10px" }, format: 'A4' });
        console.log("生成pdf成功");
        await browser.close();
        console.log("关闭chrome");
    }
    console.log("生成pdf任务执行中")
    pdf().then(data=>{
        res.json({ message: "生成文件成功" })
    }).catch(err=>{
        console.log(err)
        next(err);
        console.log("生成pdf任务由于某些原因失败")
    })
});
module.exports = router;

前端需要调用 nodejs 接口即可

注意：args: ['--no-sandbox', '--disable-setuid-sandbox'] 这个东西必加，因为在libux下不能用沙盒模式

node 服务包下面自取
链接：百度网盘
提取码：uhzk