页面生成图片或PDF node-egg

news/2024/7/14 21:57:10

没有特别的幸运,那么就特别的努力!!!

中间件:页面生成图片 node-egg

  • 涉及到技术
    • node + egg + Puppeteer
  • 解决文书智能生成多样化
  • 先看效果
  • 环境准备
    • 初始化项目
  • 目录结构
    • 核心代码
  • 完整代码
    • https://gitee.com/hammer1010_admin/node-egg

涉及到技术

node + egg + Puppeteer

官方网址:
node:https://nodejs.org/dist/v16.17.0/
egg: https://www.eggjs.org/zh-CN/
Puppeteer: https://zhaoqize.github.io/puppeteer-api-zh_CN/#/

本次使用node版本:16.17.0

解决文书智能生成多样化

场景1:
比如全国有34个省份,每个省份文书模板不一样
场景2:
条件不一样,文书生成格式布局不一样

先看效果

以百度地址为例: — https://www.baidu.com

1. 启动项目后
http://192.168.XX.XX:7400/  (浏览器访问  端开以你本机为准)2. 通过postman测试接口地址:http://192.168.XX.XX:7400/canvas/getImage
post请求 + 参数
{"url": "https://www.baidu.com"
}

效果图:
在这里插入图片描述

环境准备

操作系统:支持 macOS,Linux,Windows
运行环境:建议选择 LTS 版本,最低要求 8.x。

初始化项目

$ mkdir node-egg
$ cd node-egg
$ npm init
$ npm i egg --save
$ npm i egg-bin --save-dev
$ npm i @sentry/node events generic-pool puppeteer -D

添加 npm scripts 到 package.json:

{"name": "pdf","version": "1.0.0","description": "","main": "app.js","scripts": {"dev": "egg-bin dev"},"author": "hammer1010","license": "ISC","dependencies": {"@sentry/node": "^7.60.1","egg": "^3.17.3","events": "^3.3.0"},"devDependencies": {"egg-bin": "^6.4.1","generic-pool": "^3.9.0","puppeteer": "^20.9.0"}
}

目录结构

egg-example
├── app
│   ├── controller
│   │   └── home.js
│   │   └── XX.js
│   ├── plugins
│   │   └── puppeteer-pool.js
│   ├── service
│   │   └── canvas.js
│   └── router.js
├── config
│   └── config.default.js
└── package.json

主要就是一个puppeteer-pool 线程池,新建一个puppeteer-pool.js文件

'use strict';
const puppeteer = require('puppeteer');
const genericPool = require('generic-pool');/*** 初始化一个 Puppeteer 池* @param {Object} [options={}] 创建池的配置配置* @param {Number} [options.max=10] 最多产生多少个 puppeteer 实例 。如果你设置它,请确保 在引用关闭时调用清理池。 pool.drain().then(()=>pool.clear())* @param {Number} [options.min=1] 保证池中最少有多少个实例存活* @param {Number} [options.maxUses=2048] 每一个 实例 最大可重用次数,超过后将重启实例。0表示不检验* @param {Number} [options.testOnBorrow=2048] 在将 实例 提供给用户之前,池应该验证这些实例。* @param {Boolean} [options.autostart=false] 是不是需要在 池 初始化时 初始化 实例* @param {Number} [options.idleTimeoutMillis=3600000] 如果一个实例 60分钟 都没访问就关掉他* @param {Number} [options.evictionRunIntervalMillis=180000] 每 3分钟 检查一次 实例的访问状态* @param {Object} [options.puppeteerArgs={}] puppeteer.launch 启动的参数* @param {Function} [options.validator=(instance)=>Promise.resolve(true))] 用户自定义校验 参数是 取到的一个实例* @param {Object} [options.otherConfig={}] 剩余的其他参数 // For all opts, see opts at https://github.com/coopernurse/node-pool#createpool* @return {Object} pool*/
const initPuppeteerPool = (options = {}) => {const {max = 10,min = 2,maxUses = 2048,testOnBorrow = true,autostart = false,idleTimeoutMillis = 3600000,evictionRunIntervalMillis = 180000,puppeteerArgs = {},validator = () => Promise.resolve(true),...otherConfig} = options;const factory = {create: () =>puppeteer.launch(puppeteerArgs).then(instance => {// 创建一个 puppeteer 实例 ,并且初始化使用次数为 0instance.useCount = 0;return instance;}),destroy: instance => {instance.close();},validate: instance => {// 执行一次自定义校验,并且校验校验 实例已使用次数。 当 返回 reject 时 表示实例不可用return validator(instance).then(valid => Promise.resolve(valid && (maxUses <= 0 || instance.useCount < maxUses)));},};const config = {max,min,testOnBorrow,autostart,idleTimeoutMillis,evictionRunIntervalMillis,...otherConfig,};const pool = genericPool.createPool(factory, config);const genericAcquire = pool.acquire.bind(pool);// 重写了原有池的消费实例的方法。添加一个实例使用次数的增加pool.acquire = () =>genericAcquire().then(instance => {instance.useCount += 1;return instance;});pool.use = fn => {let resource;return pool.acquire().then(r => {resource = r;return resource;}).then(fn).then(result => {// 不管业务方使用实例成功与否都表示一下实例消费完成pool.release(resource);return result;},err => {pool.release(resource);throw err;});};return pool;
};module.exports = { initPuppeteerPool };

核心代码

'use strict';const Service = require('egg').Service;
const path = require('path');const { mkdirSyncGuard, __Time, generateGuid } = require('../../util');// const regx = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/; // 校验URL合法性
const regx = /(^(http|https):\/\/([\w\-]+\.)+[\w\-]+(\/[\w\u4e00-\u9fa5\-\.\/?\@\%\!\&=\{\}\\"\[\]\+\~\:\#\;\,]*)?)/;class CanvasService extends Service {// 截图async generateImage({ url, width, height, isMobile, deviceScaleFactor }) {const { app } = this;const fileDir = __Time(new Date()).substr(0, 10);// path.resolve() 拼接路径 ==> __dirname 获取文件所在的绝对路径const fileTempPath = path.resolve(__dirname, '../public/canvas', fileDir); // 文件临时路径mkdirSyncGuard(fileTempPath); // 递归检查目录if (!regx.test(url)) return null;try {const FileName = `${generateGuid()}.png`;const ImagePath = path.join(fileTempPath, FileName);await app.pool.use(async puppeteerInstance => {const page = await puppeteerInstance.newPage();width && height && await page.setViewport({ width, height, isMobile, deviceScaleFactor });await page.goto(url, { waitUntil: 'networkidle2' });await page.screenshot({ path: ImagePath, type: 'png', fullPage: true, width: width || 768 });await page.close();});return `canvas/${fileDir}/${FileName}`;} catch (e) {console.log(e);}}/*** 生成PDF* @param {object} param 参数*/async generatePDF({ url, width = undefined, height = undefined, isMobile = undefined, deviceScaleFactor = 1, format = undefined, margin = undefined, printBackground = true }) {const { app } = this;const fileDir = __Time(new Date()).substr(0, 10);const fileTempPath = path.resolve(__dirname, '../public/canvas', fileDir); // 文件临时路径mkdirSyncGuard(fileTempPath); // 递归检查目录if (!regx.test(url)) return null;try {const FileName = `${generateGuid()}.pdf`;const FilePath = path.join(fileTempPath, FileName);await app.pool.use(async puppeteerInstance => {const page = await puppeteerInstance.newPage();width && height && await page.setViewport({ width, height, isMobile, deviceScaleFactor });await page.goto(url, {waitUntil: 'networkidle2',});// I dont't no Whyformat && await page.pdf({ path: FilePath, omitBackground: true, displayHeaderFooter: true, printBackground: Boolean(printBackground), width: width || 768, height: height || 1400, format: format || 'letter', margin: margin || 0 });!format && await page.pdf({ path: FilePath, omitBackground: true, displayHeaderFooter: true, printBackground: Boolean(printBackground), width: width || 768, height: height || 1400, margin: margin || 0 });await page.close();});return `canvas/${fileDir}/${FileName}`;} catch (e) {console.log(e);}}
}module.exports = CanvasService;

完整代码

https://gitee.com/hammer1010_admin/node-egg

希望能帮助到大家,同时祝愿大家在开发旅途中愉快!!!

拿着 不谢 请叫我“锤” !!!


http://www.mrgr.cn/p/08443666

相关文章

[论文笔记] CLRerNet: Improving Confidence of Lane Detection with LaneIoU

Honda, Hiroto, and Yusuke Uchida. “CLRerNet: Improving Confidence of Lane Detection with LaneIoU.” arXiv preprint arXiv:2305.08366 (2023). 2023.05 出的一篇车道线检测的文章, 效果在CULane, CurveLanes SOTA 文章目录 简介LaneIoULineIoU存在问题为什么使用LaneIo…

06. 管理Docker容器数据

目录 1、前言 2、Docker实现数据管理的方式 2.1、数据卷&#xff08;Data Volumes&#xff09; 2.2、数据卷容器&#xff08;Data Volume Containers&#xff09; 3、简单示例 3.1、数据卷示例 3.2、数据卷容器示例 1、前言 在生产环境中使用 Docker&#xff0c;一方面…

记一次sql注入分析与绕过【一】

下面是来自今天的项目&#xff0c;简单记录一下 手工注入 加单引号sql报错 sql语句如下&#xff0c;可见参数id原本未被引号包裹 SELECT DISTINCT u.* FROM t_user u WHERE u.name like %1% and u.account like %1% and u.state ? order by id desc limit 0,20 多方尝试…

回归预测 | MATLAB实现GRNN广义回归神经网络多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现GRNN广义回归神经网络多输入单输出回归预测(多指标,多图) 目录 回归预测 | MATLAB实现GRNN广义回归神经网络多输入单输出回归预测(多指标,多图)效果一览基本介绍程序设计参考资料效果一览 基本介绍 MATLAB实现GRNN广义回归神经网络多输入单输出回归…

Android 面试题 应用程序结构 九

&#x1f525; 核心应用程序 Activity五个状态&#x1f525; Starting-> running-> paused-> stopped-> killed 启动状态&#xff08;Starting&#xff09;&#xff1a;Activity的启动状态很短暂&#xff0c;当Activity启动后便会进入运行状态&#xff08;Running…

HTTP协议+GET/POST区别

1. web开发流程 &#xff08;1&#xff09; HTML、CSS、JS、图片等资源通过浏览器进行整合&#xff0c;最终渲染出所需画面。 &#xff08;2&#xff09;浏览器对Web服务器进行资源请求 浏览器通过url请求资源。【HTTP协议、URL&#xff1a;确定唯一的一个资源】 浏览器请求…

【Linux】进程轻松入门

目录 一&#xff0c; 冯* 诺依曼体系结构 1&#xff0c;存储结构 ​编辑 二&#xff0c; 操作系统 1&#xff0c;概念 2&#xff0c;设计OS的目的 3&#xff0c;定位 4&#xff0c;如何理解 "管理" 5&#xff0c; 总结 三&#xff0c;进程 1. 概念 那么…

保姆级秋招教程之简历篇

大家好&#xff0c;我是千寻哥&#xff0c;个人简历在程序员求职过程中扮演着至关重要的角色。 今天我将详细给大家介绍一下写简历的必备要素和布局&#xff0c;同时强调应避免的“坑”&#xff01; 希望能通过这些技巧&#xff0c;能帮助程序员打造一份出色的简历&#xff0c;…

Java代码连接RabbitMQ服务器

目录 1.添加依赖 2.生产者代码 3.消费者代码 4.效果 1.发送消息 2.消费消息 5.注意 1.添加依赖 <dependency><groupId>com.rabbitmq</groupId><artifactId>amqp-client</artifactId><version>5.12.0</version></dependenc…

Rust 数据类型 之 结构体(Struct)

目录 结构体&#xff08;Struct&#xff09; 定义与声明 结构体定义 结构体实例 结构体分类 单元结构体&#xff08;Unit Struct&#xff09; 元组结构体&#xff08;Tuple Struct&#xff09; 具名结构体&#xff08;Named Struct&#xff09; 结构体嵌套 结构体方法…

ChatGPT+MidJourney 3分钟生成你的动画故事

chatgpt是真的火了&#xff0c;chatgpt产生了一个划时代的意义——自chatgpt起&#xff0c;AI是真的要落地了。 chatgpt能做的事情太多了&#xff0c;多到最初开发模型的程序员自己&#xff0c;也没法说得清楚chatgpt都能做啥&#xff0c;似乎只要你能想得到&#xff0c;它都有…

SSM整合

文章目录 Spring Spring MVCMyBatis整合目录结构引入Maven包web.xml文件导入spring_mvc.xml**spring_mvc.xml****中添加**json**返回编码**UTF-8**导入spring_config.xml文件导入mybatis.xml文件创建pojo对象创建Mapper.xml创建Service创建Controller Spring Spring MVCMyBatis…

Linux系统使用(超详细)

目录 Linux操作系统简介 Linux和windows区别 Linux常见命令 Linux目录结构 Linux命令提示符 常用命令 ls cd pwd touch cat echo mkdir rm cp mv vim vim的基本使用 grep netstat Linux面试题 Linux操作系统简介 Linux操作系统是和windows操作系统是并列…

【论文笔记】KDD2019 | KGAT: Knowledge Graph Attention Network for Recommendation

Abstract 为了更好的推荐&#xff0c;不仅要对user-item交互进行建模&#xff0c;还要将关系信息考虑进来 传统方法因子分解机将每个交互都当作一个独立的实例&#xff0c;但是忽略了item之间的关系&#xff08;eg&#xff1a;一部电影的导演也是另一部电影的演员&#xff09…

【数据结构与算法】斐波那契查找(黄金分割法)

斐波那契查找&#xff08;黄金分割法&#xff09; 黄金分割点是指把一条线段分割成两部分&#xff0c;使其中一部分与全长之比等于另一部分与这部分之比。取其前三位数字的近似值是 0.618。由于按此比例设计的造型十分美丽&#xff0c;因此称为黄金分割&#xff0c;也称为中外比…

人工智能安全-2-非平衡数据处理

0 提纲 现象与原因非平衡数据处理方法概览数据预处理层面特征层算法层面1 现象与原因 非平衡数据分类问题:在网络信息安全问题中,诸如恶意软件检测、SQL注入、不良信息检测等许多问题都可以归结为机器学习分类问题。这类机器学习应用问题中,普遍存在非平衡数据的现象。 产…

Spring MVC拦截器和跨域请求

一、拦截器简介 SpringMVC的拦截器&#xff08;Interceptor&#xff09;也是AOP思想的一种实现方式。它与Servlet的过滤器&#xff08;Filter&#xff09;功能类似&#xff0c;主要用于拦截用户的请求并做相应的处理&#xff0c;通常应用在权限验证、记录请求信息的日志、判断用…

618技术揭秘 - 大促弹窗搭投实践 | 京东云技术团队

背景 618 大促来了&#xff0c;对于业务团队来说&#xff0c;最重要的事情莫过于各种大促营销。如会场、直播带货、频道内营销等等。而弹窗作为一个极其重要的强触达营销工具&#xff0c;通常用来渲染大促氛围、引流主会场、以及通过频道活动来提升频道复访等。因此&#xff0…

管理ceph集群

文章目录 ceph的常用命令查看集群状态查看pg的状态查看mon节点状态查看osd的通用命令查看osd的容量查看osd池写入文件测试查看池的属性查看文件映射过程 添加磁盘删除磁盘 ceph的常用命令 查看集群状态 ceph osd pool application enable pool-name rbd #将池启用rbd功能 ceph…

华为数通HCIA-网络模型

TCP 网络通信模式 作用&#xff1a;指导网络设备的通信&#xff1b; OSI七层模型&#xff1a; 7.应用层&#xff1a;由应用层协议&#xff08;http、FTP、Telnet.&#xff09;为应用程序产生对应的数据&#xff1b; 6.表示层&#xff1a;将应用层产生的数据转换成网络设备看…