使用node将页面转为pdf?(puppeteer实现)

本文章适合win系统下实验(linux,mac可能会出现些莫名其妙的bug我也不会解决)

具体过程

首先了解什么时无头浏览器

复制代码
没有界面的浏览器

下载puppeteer

js 复制代码
npm i puppeteer

下载中可能会出现文件,中途不要暂停,这个不用管

启动无头浏览器

js 复制代码
  const browser = await puppeteer.launch({
        args: ['--no-sandbox', '--disable-setuid-sandbox', '--enable-accelerated-2d-canvas', '--enable-aggressive-domstorage-flushing'],
        ignoreHTTPSErrors: true,
        headless: true,
        timeout: 60000,
    });

打开指定的url页面

js 复制代码
 const page = await browser.newPage();
    await page.setViewport({
        width: 640,
        height: 480,
        deviceScaleFactor: 1,
      });//将调整页面大小。许多网站不希望手机改变大小,因此你应该在导航到页面之前设置视口。
    let waitUntil;;
    waitUntil = 'networkidle0';
    await page.goto(url, { waitUntil });
复制代码
waitUntil = 'networkidle0';
这个参数就是当网络在一定时间内不在请求时开始执行(进入一个网页肯定会加载相应的js,css文件)

设置导出pdf格式

js 复制代码
 const options = {
        //纸张尺寸
        // format: 'A4',
        width: '800px',
        height: '1130px',
        //打印背景,默认为false
        printBackground: true,
        //不展示页眉
        displayHeaderFooter: true,
        //页眉与页脚样式,可在此处展示页码等
        headerTemplate: '',
        footerTemplate: '',
        path: filePath  //指定生成的pdf文件存放路径
    };

开始转化

js 复制代码
  await page.pdf(options);
    //关闭页面
    page.close();
    //关闭 chromium
    browser.close();

完整基础代码

直接放在index.js文件里

js 复制代码
const puppeteer = require('puppeteer');

async function generatePdf(url, filePath) {
    //启动无头浏览器
    const browser = await puppeteer.launch({
        args: ['--no-sandbox', '--disable-setuid-sandbox', '--enable-accelerated-2d-canvas', '--enable-aggressive-domstorage-flushing'],
        ignoreHTTPSErrors: true,
        headless: true,
        timeout: 60000,
    }); //PDF 生成仅在无界面模式支持, 调试完记得设为 true
    const page = await browser.newPage();
    await page.setViewport({
        width: 640,
        height: 480,
        deviceScaleFactor: 1,
      });//将调整页面大小。许多网站不希望手机改变大小,因此你应该在导航到页面之前设置视口。
    let waitUntil;;
    waitUntil = 'networkidle0';
    await page.goto(url, { waitUntil });
    await page.waitForSelector('.mod-article-content');//等到这个元素出现时开始转化

    //导出PDF的格式
    const options = {
        //纸张尺寸
        // format: 'A4',
        width: '800px',
        height: '1130px',
        //打印背景,默认为false
        printBackground: true,
        //不展示页眉
        displayHeaderFooter: true,
        //页眉与页脚样式,可在此处展示页码等
        headerTemplate: '',
        footerTemplate: '',
        path: filePath  //指定生成的pdf文件存放路径
    };
    await page.pdf(options);
    //关闭页面
    page.close();
    //关闭 chromium
    browser.close();
}
generatePdf('https://cloud.tencent.com/developer/article/1417076', 'a.pdf')  

然后启动node index.js

接着你会发现多了一个a.pdf文件

相关推荐
GDAL1 小时前
Node.js v22.5+ 官方 SQLite 模块全解析:从入门到实战
数据库·sqlite·node.js
RunsenLIu5 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
Allen_zx7 小时前
Elpis - 基于 Koa + Vue3 的企业级全栈应用框架
node.js
老家的回忆7 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
Vertira7 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
鹏程7 小时前
局域网下五子棋,html+node.js实现
node.js·html
爱分享的程序员8 小时前
前端面试专栏-算法篇:17. 排序算法
前端·javascript·node.js
盛夏绽放9 小时前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
十一08299310 小时前
【PDF-XSS攻击】springboot项目-上传文件-解决PDF文件XSS攻击
spring boot·pdf·xss
qq_3938282210 小时前
PDF的图片文字识别工具
windows·pdf·电脑·软件需求·图片处理