之前写过一篇 vue cli2 使用 wkhtmltopdf 踩坑指南，由于wkhtmltopdf对vue的支持并不友好，而且不支持css3，经过调研最终选择puppeteer，坑少，比较靠谱。
一、准备工作
- puppeteer中文文档: https://zhaoqize.github.io/puppeteer-api-zh_CN/#/
- node版本必须在10.18.1+以上
- 新建pdf.js
- 安装puppeteer
npm install puppeteer（这里用的是15.0.1版本，测试没问题） - 需要生成pdf的html页面需要添加打印样式（不添加会导致背景色无法显示等问题）
html { -webkit-print-color-adjust: exact; } - cd到pdf.js所在的文件夹执行node pdf.js
二、常用案例
这里直接提供一些常用的生成pdf案例，比较简单，直接复制就能用
1. 通过设置token下载pdf的最简单使用方式
直接执行 node pdf.js 即可
pdf.js
const puppeteer = require('puppeteer') const token = 'kjjkheyJzdWIiOiIxMDAwMDAwMDAwMDAxMjM0' async function printPDF() { const browser = await puppeteer.launch({ headless: true }) const page = await browser.newPage() await page.setExtraHTTPHeaders({'uniedu-sso-token': token}) await page.goto('https://test.web.moedu.net/aital-class-review-h5/#/reportDetail', {waitUntil: 'networkidle0'}) await page.pdf({ path: 'test.pdf', format: 'A4'}) await browser.close() } printPDF() 2. 通过html字符串生成pdf
pdf.js
const puppeteer = require('puppeteer') const html = `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />· <title>Document</title> <style> html { line-height: 1.15; -webkit-print-color-adjust: exact; } body { margin: 0; font-family: "Times New Roman",'宋体'; font-weight: 400; } </style> </head> <body> <div>页面Dom</div> </body> </html>` async function printPDF() { const browser = await puppeteer.launch({ headless: true }) const page = await browser.newPage() await page.setContent(html, {waitUntil: 'networkidle0'}) await page.pdf({ path: 'test.pdf', format: 'A4'}) await browser.close() } printPDF() 3. 简单封装node命令的形式并通过引入html文件生成pdf
首先需要安装 npm install minimist
这里的A3自定义了宽高，puppeteer也有自己默认的A3尺寸，具体详见官方文档page.pdf([options])
生成test.pdf可通过执行该命令 node pdf.js --format=A3 --htmlPath=./index.html --pdfPath=./test.pdf
const puppeteer = require('puppeteer') const fs = require('fs') const args = require('minimist')(process.argv.slice(2)) const format = args['format'] const htmlPath = args['htmlPath'] const pdfPath = args['pdfPath'] const pdfParams = { 'A3': { path: pdfPath, width: '420mm', height: '297mm', margin: { right: '0.1cm', } }, 'A4': { path: pdfPath, format: 'A4' } } async function printPDF(format = 'A4') { // 如果需要部署在服务端尽量加上这行参数 const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox'], headless: true}) const page = await browser.newPage() const htmlContent = fs.readFileSync(htmlPath, 'utf-8') await page.setContent(htmlContent, { waitUntil: 'networkidle0' }) await page.pdf(pdfParams[format]) await browser.close() } printPDF(format) 4. 循环异步批量下载pdf
这里browser只需要打开一次就可以了，只需要每次跳转新页面下载pdf，这样可以不用频繁的开启关闭无头浏览器
const puppeteer = require('puppeteer') const tokens = require('./tokens.json') async function printPDF(page, token, index) { console.log(`第${index + 1}份正在打印……`) await page.goto('https://baidu.com', {waitUntil: 'networkidle0'}); await page.pdf({ path: `./pdf/node${index + 1}.pdf`, format: 'A4'}) console.log(`第${index + 1}份已经完成`) } async function printAll() { console.log(`一共${tokens.length}份，正在打印中……`) const browser = await puppeteer.launch({ headless: true }) const page = await browser.newPage() await page.setExtraHTTPHeaders({'uniedu-sso-token': token}) for(let i = 0; i < tokens.length; i ++){ await printPDF(page, tokens[i], i) } await browser.close() } printAll() 如果需要自动生成文件夹归类，可以用node的fs.existsSync和fs.mkdirSync方法，先判断有没有这个文件夹，没有则创建
if(!fs.existsSync('dirName')) { fs.mkdirSync('dirName') } 5. puppeteer生成截图
这里直接给出最近简单封装的node命令形式的代码作为参考，大部分参数可以参考官方文档
唯一值得说的一个参数是fitContent，这个是我自己加的，可以用于局部的截图，需要html的标签内含有screenshot这个id，说白了就是需要截图的元素用<div id="screenshot"></div>包裹起来
const puppeteer = require('puppeteer') const fs = require('fs') const args = require('minimist')(process.argv.slice(2)) const clip = {} args.clipX && (clip.x = Number(args.clipX)) args.clipY && (clip.y = Number(args.clipY)) args.clipW && (clip.width = Number(args.clipW)) args.clipH && (clip.height = Number(args.clipH)) let params = {} args.imgPath && (params.path = args.imgPath) args.type && (params.type = args.type) args.quality && (params.quality = Number(args.quality)) args.fullPage && (params.fullPage = args.fullPage === 'true') args.omitBackground && (params.omitBackground = args.omitBackground === 'true') args.encoding && (params.encoding = args.encoding) Object.keys(clip).length !== 0 && (params.clip = clip) async function printImg() { const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox'], headless: true}) const page = await browser.newPage() const htmlContent = fs.readFileSync(args.htmlPath, 'utf-8') await page.setContent(htmlContent, { waitUntil: 'networkidle0' }) const range = await page.$('#screenshot') const clip = await range.boundingBox() const result = args.fitContent === 'true' ? { ...params, clip } : params await page.screenshot(result) await browser.close() } printImg() /* 参数说明： htmlPath: html文件路径 imgPath: 截图保存路径。截图图片类型将从文件扩展名推断出来。如果是相对路径，则从当前路径解析。如果没有指定路径，图片将不会保存到硬盘 type: 指定截图类型, 可以是 jpeg 或者 png。默认 'png'. quality: 图片质量, 可选值 0-100. png 类型不适用。 fullPage: 如果设置为true，则对完整的页面（需要滚动的部分也包含在内）。默认是false clipX: 指定裁剪区域相对于左上角（0， 0）的x坐标 clipY: 指定裁剪区域相对于左上角（0， 0）的y坐标 clipW: 指定裁剪区域的宽度 clipH: 指定裁剪区域的高度 omitBackground: 隐藏默认的白色背景，背景透明。默认不透明 encoding: 图像的编码可以是 base64 或 binary。 默认为“二进制”。 fitContent: 设为true，则只对id="screenshot"包裹的内容区域截图 */ // node 命令示例 // node puppeteer_img.js --htmlPath=./index.html --imgPath=aa.png --fullPage=true --fitContent=true 6. 调用本地chrome
puppeteer默认会安装一个最新版本的chromiue，也可以调起本地的chrome，这时候需要使用puppeteer-core
安装npm i puppeteer-core carlo
const puppeteer = require('puppeteer-core'); //find_chrome模块来源于GoogleChromeLabs的Carlo,可以查看本机安装Chrome目录 const findChrome = require('./node_modules/carlo/lib/find_chrome.js') ;(async () => { let findChromePath = await findChrome({}) let executablePath = findChromePath.executablePath; console.log(executablePath) const browser = await puppeteer.launch({ executablePath, headless: false }) const page = await browser.newPage() await page.goto('https://www.baidu.com/') // await browser.close() })() 
