神器：用 pyppeteer 转换公众号文章为 PDF

随风 • 2021-10-06 • Python知识 • 574 阅读

这是「进击的Coder」的第 368 篇技术分享

作者：刘志军

来源：Python 之禅

“

阅读本文大概需要 8 分钟。

”

之前介绍过一些将 html 转换为 PDF 文件的库，比如 wkhtmltopdf、WeasyPrint，今天再介绍另一个神器 Pyppeteer 可将 html 页面转换为 PDF。

Pyppeteer 是什么

介绍 Pyppeteer 之前，有必要先介绍一下 Puppeteer，Puppeteer 是谷歌官方出的一个通过 DevTools 协议控制 headless Chrome 的 Node 库。通过 Puppeteer 可以直接控制 Chrome 浏览器模拟大部分用户操作。

所谓 Headless Chrome 就是 Chrome 浏览器的无界面形态。

而 Pyppeteer 就是 Puppeteer 的 Python 版本非官方实现，它是一位来自于日本的工程师依据 Puppeteer 的一些功能开发出来的非官方版本。

Pyppeteer 采用了 Python 的 async 机制，需要 Python3.5 及以上版本才支持。

Pyppeteer 能做什么

但凡是需要通过 Chrome 浏览器手动完成的操作都可以通过 Pyppeteer 自动完成，例如：

生成页面截图
生成 PDF 文件
抓取单页面应用并生成预先呈现的内容
从网站抓取你需要的内容
自动表单提交，UI 测试，键盘输入等

截图

例如将页面生成截图可以直接调用 page.screenshot 方法

import asyncio
from pyppeteer import launch

async def main():
    browser = await launch()
    page = await browser.newPage()
    await page.goto('https://foofish.net')
    await page.screenshot({'path': 'example.png'})
    await browser.close()

asyncio.get_event_loop().run_until_complete(main())

截图功能在海报分享等场景用的多，有看过有赞工程师分享的一篇文章，就有用到 Puppeteer 来做海报分享，性能比 Canvas 高。

而将网页转换为 PDF 的应用场景更多，比如将网站博客、专栏，或者公众号文章批量导出 PDF，方便离线阅读，比如我们最近做的一个医疗项目需要将用户填写的资料支持 PDF 形式批量导出，就是用的 Pyppeteer

导出 PDF

导出 pdf 直接调用 page.pdf 方法就可以，代码非常简洁

import asyncio
from pyppeteer import launch

async def main():
    browser = await launch()
    page = await browser.newPage()
    await page.goto('https://foofish.net')
    await page.pdf({
        "path": "example.pdf", "format": 'A4'})
    await browser.close()

asyncio.get_event_loop().run_until_complete(main())

接下来我们以公众号文章为例，将 html 页面制作成一个 PDF 文件。

公众号链接导出 PDF 示例

安装 pyppeteer

pip install pyppeteer

任意找一篇公众号的文章链接

 url = "https://mp.weixin.qq.com/s/6VBXs19icV0O5hT7cHYwgw"

完成代码：

    browser = await launch()
    page = await browser.newPage()
    url = "https://mp.weixin.qq.com/s/6VBXs19icV0O5hT7cHYwgw"
    await page.goto(url)
    file_name = "test.pdf"
    await page.pdf({"path": file_name, "format": 'A4'})
    await browser.close()

第一次运行的时候，会自动下载 chromium 浏览器，chromium 是 chrome 的开源版本，需要几分钟才能下载完

[W:pyppeteer.chromium_downloader] start chromium download.
Download may take a few minutes.
100%|██████████| 127496521/127496521 [00:20<00:00, 6268578.80it/s]
[W:pyppeteer.chromium_downloader] 
chromium download done.
[W:pyppeteer.chromium_downloader] chromium extracted to: C:UserslzjunAppDataLocalpyppeteerpyppeteerlocal-chromium575458

执行完成后，我们来预览下 pdf 文件

和原文链接对比，发现文章中的图片丢失了。

通过分析，原来是页面源代码中，img 标签没有 src 属性，只有个 data-src 属性，默认情况下图片是无法正常显示的，图片之所有能在浏览器能正常展示出来，是有个 js 脚本动态地修改了 dom 元素为 <img src='xxxx'>

这个网页使用的是一种叫懒加载的技术展示图片内容，所谓懒加载就是图片不会一次全部下载完，而是当前浏览到什么位置，就加载该处的图片，这样能提高页面的响应速度，同时减轻服务器性能。

所以，我们也可以通过js代码模拟真人浏览网页一样，滚动鼠标，不停地往下滑动，将图片动态加载出来。

最后，完整代码就变成了这样：

async def main():
    browser = await launch()
    page = await browser.newPage()
    url = "https://mp.weixin.qq.com/s/6VBXs19icV0O5hT7cHYwgw"
    await page.goto(url)
    await page.evaluate('''async () => {
                    await new
                Promise((resolve, reject) => {
                    var
                totalHeight = 0;
                var
                distance = 100;
                var
                timer = setInterval(() => {
                    var
                scrollHeight = document.body.scrollHeight;
                window.scrollBy(0, distance);
                totalHeight += distance;

                if (totalHeight >= scrollHeight){
                clearInterval(timer);
                resolve();
                }
                }, 100);
                });
        }''')
    await page.pdf({
        "path": "test.pdf", "format": 'A4'})
    await browser.close()

if __name__ == '__main__':
    asyncio.get_event_loop().run_until_complete(main())