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

news2024/11/23 11:55:14

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

具体过程

  • 首先了解什么时无头浏览器
  • 启动无头浏览器
  • 打开指定的url页面
  • 设置导出pdf格式
  • 开始转化
  • 完整基础代码

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

没有界面的浏览器

下载puppeteer

npm i puppeteer

下载中可能会出现文件,中途不要暂停,这个不用管
在这里插入图片描述

启动无头浏览器

  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页面

 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格式

 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();

完整基础代码

直接放在index.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文件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1796392.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【uni-app】JS动态修改scss样式变量

需求: 1、 当H5嵌入到APP时,使用H5自身的头部,需要兼容手机自带的navbar高度,因此在嵌入APP时,需要固定H5 navbar距离手机自带头部高度:$uni-head:44px; 而paging-head-top是由于z-paging定位导致会覆盖或高…

使用kafka tools工具连接带有用户名密码的kafka

使用kafka tools工具连接带有用户名密码的kafka 创建kafka连接,配置zookeeper 在Security选择Type类型为SASL Plaintext 在Advanced页面添加如下图红框框住的内容 在JAAS_Config加上如下配置 需要加的配置: org.apache.kafka.common.security.plain.Pla…

【大事件】docker可能无法使用了

今天本想继续学习docker的命令,突然发现官方网站的文档页面打不开了。 难道是被墙了? 我用同事的翻了一下,能进,果然! 正好手头的工作告一段落,将代码上传,然后通过jenkins将服务器自动部署到…

GAT1399协议分析(7)--pycharm anaconde3 配置pyside2

一、安装pyside2 pip install pyside2 二、配置qtdesigner File->Settings->Tools->External tools 点击添加,添加QtDesigner, 注意designer.exe路径,需要在虚拟环境下。 三、添加pySide2 File->Settings->Tools->Ext…

【Java】应用分层解密:优化代码结构与增强项目可维护性

目录 应用分层介绍代码重构应用分层的好处企业规范 应用分层 通过上⾯的练习, 我们学习了Spring MVC简单功能的开发, 但是我们也发现了⼀些问题 ⽬前我们程序的代码有点"杂乱", 然⽽当前只是"⼀点点功能"的开发. 如果我们把整个项⽬功能完成呢? 代码会…

蓝桥杯物联网竞赛 比赛总结

CUBEMX配置建议: 对于CUBEMX配置来说stm32l071kbu6的引脚不算太多,功能模块相对的也不多,所以我建议直接熟练到能将所有模块烂熟于心,不用看原理图就能熟练配置下来,因为国赛看原理图去配置太花费时间 我建议学习的时…

NIST 电子病历中的疫苗部分的认证

美国国家标准与技术研究院(National Institute of Standards and Technology,NIST)对电子病历的认证 分几个阶段,每个阶段又分门诊和住院,然后又分若干模块。下面是疫苗模块的数据提交的测试脚本。 170.302k_Immuniza…

socket网络编程——多进程、多线程处理并发

如下图所示, 当一个客户端与服务器建立连接以后,服务器端 accept()返回,进而准备循环接收客户端发过来的数据。 如果客户端暂时没发数据,服务端会在 recv()阻塞。此时,其他客户端向服务器发起连接后,由于服…

DP:子序列模型

子数组vs子数列 1、子数组(n^2) 子序列(2^n) 2、子数组是子序列的一个子集 3、子数组必须连续,子序列可以不连续 一、最长递增子序列 . - 力扣(LeetCode) 算法原理: 1、状态表示&#xff…

智能电销机器人的作用和原理是什么?

要问世界上更火爆的创新技术,人工智能必然要算其一,人工智能正不断的改变着我们的生活,比如智能手机、智能家居、智能门锁等产品已经不断的渗透在了我们的生活之中,而近几年兴起的人工智能语音识别机器人,也迅速俘获了…

Centos7安装ElasticSearch

Centos7安装ElasticSearch 准备工作 下载elasticsearch https://www.elastic.co/cn/elasticsearch 将下载好的包上传到/usr/local/elasticsearch/ 路径下 安装 安装elasticsearch解压缩即可! tar -zxvf elasticsearch-8.12.2-linux-x86_64.tar.gz进入/usr/loca…

使用Django Channels和WebSocket构建聊天应用

一、引言 WebSocket提供了一种在客户端和服务器之间进行实时双向通信的方式。结合Django Channels,我们可以轻松地在Django项目中实现WebSocket功能。本文将通过一个简单的聊天应用示例,展示如何使用Django Channels和WebSocket。 二、环境搭建 项目的…

Spring Boot 整合开源 Tess4J库 实现OCR图片文字识别

😄 19年之后由于某些原因断更了三年,23年重新扬帆起航,推出更多优质博文,希望大家多多支持~ 🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 🎐 个人CSND主页——Mi…

Linux基础 (十二):Linux 线程的创建与同步

本篇博客详细介绍与线程有关的内容,这部分也是笔试面试的重点,需要我们对线程有深刻的理解,尤其是线程的并发运行以及线程同步的控制!接下来,让我们走进线程的世界,去理解线程,使用线程&#xf…

修改west扩展命令的路径

west命令是zephyr工程中非常重要的工具。使用west命令,可以高效的创建工程,管理代码,此外,通过扩展命令,还可以支持编译,烧录等功能。 从下图中可以看出,extension commands from project mani…

线性代数|机器学习-P8矩阵低秩近似eckart-young

文章目录 1. SVD奇异值分解2. Eckart-Young2.1 范数 3. Q A Q U Σ V T QAQU\Sigma V^T QAQUΣVT4. 主成分分析图像表示 1. SVD奇异值分解 我们知道,对于任意矩阵A来说,我们可以将其通过SVD奇异值分解得到 A U Σ V T AU\Sigma V^T AUΣVT&#xff0…

[ue5]建模场景学习笔记(4)——必修内容可交互的地形,交互沙(1)

1.需求分析: 现在的沙漠场景仅仅只是一张贴图,人物走过不会留下任何痕迹,很不真实,尝试优化一下,做出可交互的沙漠效果。 2.操作实现: 1.思路:这是一个相对复杂的工程,要考虑玩家踩…

深入理解C++三五零法则

三五零法则就是三法则(The Rule of Three)、五法则(The Rule of Five)、零法则(The Rule of Zero)。三五零法则是和C的特殊成员函数有关,特别是那些涉及对象如何被创建、复制、移动和销毁的函数…

ESD防护SP3232E真+3.0V至+5.5V RS-232收发器

特征 采用3.0V至5.5V电源,符合真正的EIA/TIA-232-F标准 满载时最低 120Kbps 数据速率 1μA 低功耗关断,接收器处于活动状态 (SP3222E) 可与低至 2.7V 电源的 RS-232 互操作 增强的ESD规格: 15kV人体模型 15kV IEC1000…

Java Web学习笔记17——Vue快速入门

什么是Vue? Vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。 基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。 官网:https://v…