共计 5014 个字符,预计需要花费 13 分钟才能阅读完成。
一、背景
开发工作中,须要实现网页生成 PDF 的性能,生成的 PDF 需上传至服务端,将 PDF 地址作为参数申请内部接口,这个转换过程及转换后的 PDF 不须要在前端展现给用户。
二、技术选型
该性能不须要在前端展现给用户,为节俭客户端资源,抉择在服务端实现网页生成 PDF 的性能。
1. Puppeteer
Puppeteer 是一个 Node
库,它提供了高级 API
来通过 DevTools
协定管制 Chrome
或 Chromium
。
在浏览器中手动执行的大多数操作都能够应用 Puppeteer
实现,比方:
- 生成页面的屏幕截图和 PDF;
- 爬取
SPA
并生成预渲染的内容(即SSR
); - 主动进行表单提交,UI 测试,键盘输入等;
- 创立最新的自动化测试环境。应用最新的
JavaScript
和浏览器性能,间接在最新版本的Chrome
中运行测试; - 捕捉工夫线跟踪网站,以帮忙诊断性能问题;
- 测试
Chrome
扩大程序。
从上可见,Puppeteer
能够实现在 Node
端生成页面的 PDF 性能。
三、实现步骤
1. 装置
进入我的项目,装置 puppeteer
到本地。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm i puppeteer --save
需注意的是,装置 puppeteer
时,会下载与 API
一起应用的最新版本的 Chromium
浏览器,有以下办法能够批改默认设置,不下载浏览器:
- 在环境变量中设置
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD
; - 用
puppeteer-core
代替puppeteer
。
puppeteer-core
是 puppeteer
的轻量级版本,默认不下载浏览器,而是启动现有的浏览器或者连贯近程浏览器,应用 puppeteer-core
需注意本地有可连贯的浏览器,且装置的 puppeteer-core
版本与打算连贯的浏览器兼容。连贯本地浏览器办法如下:
const browser = await puppeteer.launch({executablePath: '/path/to/Chrome'});
本我的项目须要部署至服务端,没有可连贯的浏览器,因而抉择装置的是 puppeteer
。
2. 启动浏览器
const browser = await puppeteer.launch({
headless: true,
args: ['--no-sandbox', '--font-render-hinting=medium']
})
headless
代表无头模式,在后端启动浏览器,前端不会有展现。
小倡议:本地调试时,倡议设置
headless: false
,能够启动残缺版本的浏览器,间接在浏览器窗口查看内容。
3. 关上新页面
生成浏览器后,在浏览器中关上新页面。
const page = await browser.newPage()
4. 跳转到指定页面
跳转至要生成 PDF 的页面。
await page.goto(`${baseURL}/article/${id}`, {
timeout: 60000,
waitUntil: 'networkidle2', // networkidle2 会始终期待,直到页面加载后不存在 2 个以上的资源申请,这种状态继续至多 500 ms
})
timeout
是最长的加载工夫,默认 30s,网页加载工夫长的状况下,倡议将 timeout
值改大,避免超时报错。
waitUntil
示意页面加载到什么水平能够开始生成 PDF 或其余操作了,当网页需加载的图片资源较多时,倡议设置为 networkidle2
,有以下值可选:
- load:当
load
事件触发时; - domcontentloaded:当
DOMContentLoaded
事件触发时; - networkidle0:页面加载后不存在 0 个以上的资源申请,这种状态继续至多 500 ms;
- networkidle2:页面加载后不存在 2 个以上的资源申请,这种状态继续至多 500 ms。
5. 指定门路,生成 pdf
上述指定的页面加载实现后,将该页面生成 PDF。
const ext = '.pdf'
const key = randomFilename(title, ext)
const _path = path.resolve(config.uploadDir, key)
await page.pdf({path: _path, format: 'a4'})
path
示意将 PDF 保留到的文件门路,如果未提供门路,PDF 将不会保留至磁盘。
小倡议:不论 PDF 是不是须要保留到本地,倡议在调试的时候都设置一个 path,不便查看生成的 PDF 的款式,查看是否有问题。
format
示意 PDF 的纸张格局,a4 尺寸为 8.27 英寸 x 11.7 英寸,是传统的打印尺寸。
留神:目前仅反对 headless: true 无头模式下生成 PDF
6. 敞开浏览器
所有操作实现后,敞开浏览器,节约性能。
await browser.close()
四、难点
1. 图片懒加载
因为需生成 PDF 的页面是文章类型的页面,蕴含大量图片,且图片引入了懒加载,导致生成的 PDF 会带有很多懒加载兜底图,成果如下图:
解决办法是跳转到页面后,将页面滚动到底部,所有图片资源都会失去申请,waitUntil
设置为 networkidle2
,图片就能加载胜利了。
await autoScroll(page) // 因为文章图片引入了懒加载,所以须要把页面滑动到最底部,保障所有图片都加载进去
/**
* 管制页面主动滚动
* */
function autoScroll (page) {return page.evaluate(() => {
return new Promise<void>(resolve => {
let totalHeight = 0
const distance = 100
// 每 200 毫秒让页面下滑 100 像素的间隔
const timer = setInterval(() => {
const scrollHeight = document.body.scrollHeight
window.scrollBy(0, distance)
totalHeight += distance
if (totalHeight >= scrollHeight) {clearInterval(timer)
resolve()}
}, 200)
})
})
}
这里用到了 page.evaluate()
办法,用来管制页面操作,比方应用内置的 DOM
选择器、应用 window
办法等等。
2. CSS 打印款式
依据官网阐明,page.pdf()
生成 PDF 文件的款式是通过 print css media
指定的,因而能够通过 css
来批改生成的 PDF 的款式,以本文需要为例,生成的 PDF 须要暗藏头部、底部,以及其余和文章主体无关的局部,代码如下:
@media print {
.other_info,
.authors,
.textDetail_comment,
.detail_recTitle,
.detail_rec,
.SuspensePanel {display: none !important;}
.Footer,
.HeaderSuctionTop {display: none;}
}
3. 登录态
因为存在一部分文章不对外部用户公开,须要鉴权用户身份,符合要求的用户能力看到文章内容,因而跳转到指定文章页后,须要在生成的浏览器窗口中注入登录态,符合条件的登录用户能力看到这部分文章的内容。
采纳注入 cookie
的形式来获取登录态,应用 page.evaluate()
设置 cookie
,代码如下:
async function simulateLogin (page, cookies, domain) {return await page.evaluate((sig, sess, domain) => {let date = new Date()
date = new Date(date.setDate(date.getDate() + 1))
let expires = ''
expires = `; expires=${date.toUTCString()}`
document.cookie = `koa:sess.sig=${sig}${expires}; domain=${domain}; path=/`
document.cookie = `koa:sess=${sess}=${expires}; domain=${domain}; path=/` // = 是这个 cookie 的 value
document.cookie = `is_login=true${expires}; domain=${domain}; path=/`
}, cookies['koa:sess.sig'], cookies['koa:sess'], domain)
}
await simulateLogin(page, cookies, config.domain.split('//')[1])
小倡议:
Puppeteer
也有自带的api
实现cookie
注入,如page.setCookie({name: name, value: value})
,然而我用这个形式注入没能获取到登录态,没有找到具体起因,倡议还是间接用我下面这个办法来注入cookie
,留神除name
和value
外,expires
、domain
、path
也须要配置。
4. Docker 部署 Puppeteer
依据上文操作,本地曾经能够胜利将页面生成 PDF 了,本地体验没问题后,须要部署到服务端给到测试、上线。
没有批改 Dockerfile
时,部署后发现了如下谬误:
官网有给 Docker 配置阐明能够参考,最终实际可用的 ubuntu
零碎的 Dockerfile
如下:
# ... 省略...
# 装置 puppeteer 依赖
RUN apt-get update && \
apt-get install -y libgbm-dev && \
apt-get install gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev -y && \
apt-get install -y fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf --no-install-recommends
# ... 省略...
只须要重点关注 装置 puppeteer 依赖 局部即可。
留神:在 v1.18.1 之前,Puppeteer 至多须要 Node v6.4.0。从 v1.18.1 到 v2.1.0 的版本都依赖于 Node 8.9.0+。从 v3.0.0 开始,Puppeteer 开始依赖于 Node 10.18.1+。配置 Dockerfile 时也须要留神服务端的 node 版本。
五、总结
本文讲述了实现在 Node
端将网页生成 PDF 文件的残缺过程,总结为以下 3 点:
- 技术选型,依据需要场景抉择适合的伎俩实现性能;
- 浏览官网文档,疾速过一遍文档能力少遇到些坑;
- 破解难点,应用一个未应用的工具,会遇到没有解决过的难题,遇招拆招吧 ^ ^。
参照 Demo 源码 可疾速上手上述性能,心愿本文能对你有所帮忙,感激浏览❤️
· 往期精彩 ·
【直播回顾·程序媛的成长变质】
【大规格文件的上传优化】
【JDR DESIGN 开发小结】
欢送关注凹凸实验室博客:aotu.io
或者关注凹凸实验室公众号(AOTULabs),不定时推送文章。