前言:将页面转成pdf的方案有很多种,用node将页面转成pdf的方案的主要应用场景是,本人在项目遇到批量导出pdf的功能,并且导出的页面是由前端写的,所以主要实现的功能是需要配合后端实现批量导出pdf的功能
一、介绍nodejs插件
1. puppeteer
puppeteer 用于通过程序控制 Chrome 或 Chromium 浏览器。通过 Puppeteer,你可以进行各种自动化任务,比如网页截图、网页内容抓取、表单填充、模拟用户交互等
npm install puppeteer
2. minimist
minimist是一个 Node.js 轻量级的命令行参数解析库,用于解析命令行参数。它可以帮助你将命令行参数解析为易于处理的对象格式,使得在 Node.js 脚本中处理命令行参数变得更加简单和方便
npm install minimist
二、代码demo (创建名为print.js的文件)
const puppeteer = require('puppeteer');
const arguments = require('minimist');
(async () => {
// 执行命令时,可以通过 --url='http://xxxxxx.com' 方式来获取参数
const prams = arguments(process.argv.slice(2));
console.log('prams', prams);
// 第一步:加载初始化一个新的 Chrome 或 Chromium 浏览器实例
const browser = await puppeteer.launch({
args: [
'--no-sandbox', // 在某些环境中避免沙箱问题
'--disable-setuid-sandbox',// 可能需要在非标准环境下运行
'--disable-dev-shm-usage', // 解决Linux上内存限制问题
],
ignoreHTTPSErrors: true,
headless: true
});
// 第二步:创建一个新的页面对象
const page = await browser.newPage();
// 设置额外的HTTP请求标头(Headers),如果需要token,添加token
// await page.setExtraHTTPHeaders({
// 'Authorization': token内容
// })
// 第三步:通过命令行接受的url参数,加载前端pdf打印页面
await page.goto(
// "http://192.168.40.29:3000/print.html",
prams.url,
{
// timeout: 3000,
waitUntil: 'networkidle0'
}
);
/**
1. waitUntil: 参数用于指定 page.waitForNavigation()、page.waitForSelector() 和 page.waitForFunction() 等方法等待条件满足的规则
2. load:等待整个页面及其资源加载完成。
3. domcontentloaded:等待页面的 DOMContentLoaded 事件完成,即文档解析完成,但不等待图片等资源加载。
4. networkidle0:等待网络状态稳定,即没有网络连接数的变化,通常用于等待所有网络连接都被关闭。
5. networkidle2:等待网络空闲状态,允许一段时间的网络连接闲置,适用于大多数网页。
6. documentloaded:等待页面文档已加载(不包括样式表、图片等资源)。
*/
// 等待页面中的 iframe 加载完成
await page.waitForSelector('iframe'); // 可以根据具体的选择器来等待特定的 iframe
// 找到页面所有的iframe并打印出iframe链接,frame.url()获取frame的url
// await page.frames().map(frame => {
// console.log('fffffff222', frame.url())
// })
// 第四步:将当前页面保存为 PDF 文件的
// path参数:页面输出的路径
await page.pdf({
// path: './print.pdf',
path: prams.path,
format: 'A4',
printBackground: true,
preferCSSPageSize: true,
displayHeaderFooter: true,
format: 'A4',
margin: {
top: '2cm',
bottom: '2cm'
},
// headerTemplate: `<div style="80%;text-align:right;margin-right: 20px;font-size:10px">页头</div>`,
// footerTemplate: `<div style="80%;text-align:right;margin-right: 20px;font-size:10px">页尾</div>`
});
// 第五步:关闭整个浏览器实例的方法
await browser.close();
})()
三、执行命令
- 前提是需要先安装前面安装两个node插件