Puppeteer 实战场景 —— 生成 PDF

最新推荐文章于 2025-05-29 16:19:01 发布

夏狗花花

最新推荐文章于 2025-05-29 16:19:01 发布

阅读量1.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：效率、工具

本文链接：https://blog.youkuaiyun.com/lychee_xiahua/article/details/119061809

本文介绍了如何使用Puppeteer库将单个和多个HTML页面转换为PDF。以Vue文档为例，展示了无界面(headless)操作，强调了在生成过程中可能遇到的超时问题，并提出了解决方案，包括错误处理和PDF合并的计划。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给单个 HTML 生成 PDF

这里拿 Vue 文档为例，把文档的介绍页转存为 pdf 。
注意，生成PDF只支持无界面的操作，headless 必须为 true

const puppeteer = require('puppeteer');

puppeteer.launch({
   
   
    headless:true, //生成PDF只支持无界面的操作！（我刚开始调试设了 false ，一直报错哈哈哈）
    defaultViewport:{
   
   
        width:1920,
        height:1080
    }
}).then(async (browser)=>{
   
   
    const page = await browser.newPage();
    await page.goto('https://cn.vuejs.org/v2/guide/index.html'); //默认会等待页面load事件触发
    await page.pdf({
   
   path: `./vueDoc-pdf/guide.pdf`}); //指定生成的pdf文件存放路径
    page.close()
    browser.close();
})

给多个HTML生成PDF

上面的示例只生成一个页面，如果想把整个 Vue 教程拿下来呢？这里就用个简单粗暴的方法：依次打开各个页面，逐个生成。还是以 Vue 文档为例，实现如下：

const puppeteer = require('puppeteer');
const fs = require('fs');

(async ()=>{
   
   

   //指定存放pdf的文件夹
   const folder = 'vueDoc'
   fs.mkdir(folder,()=>{
   
    console.log('文件夹创建成功') })