页面生成图片或PDF node-egg

没有特别的幸运，那么就特别的努力！！！

中间件：页面生成图片 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 实例 ，并且初始化使用次数为 0
        instance.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 Why
        format && 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

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数组中出现次数超过一半的数字——剑指 Offer 39

数组中出现次数超过一半的数字——剑指 Offer 39

文章目录 题目描述法一 哈希表法二 摩尔投票 题目描述 法一 哈希表 使用哈希映射&#xff08;HashMap&#xff09;来存储每个元素以及出现的次数。对于哈希映射中的每个键值对&#xff0c;键表示一个元素&#xff0c;值表示该元素出现的次数。 class Solution { public:int maj…
阅读更多...
【Python机器学习】实验03 logstic回归

【Python机器学习】实验03 logstic回归

文章目录 简单分类模型 - 逻辑回归1.1 准备数据1.2 定义假设函数Sigmoid 函数 1.3 定义代价函数1.4 定义梯度下降算法gradient descent(梯度下降) 1.5 绘制决策边界1.6 计算准确率1.7 试试用Sklearn来解决2.1 准备数据(试试第二个例子)2.2 假设函数与前h相同2.3 代价函数与前相…
阅读更多...
【语音识别】- 声学，词汇和语言模型

【语音识别】- 声学，词汇和语言模型

一、说明 语音识别是指计算机通过处理人类语言的音频信号&#xff0c;将其转换为可理解的文本形式的技术。也就是说&#xff0c;它可以将人类的口语语音转换为文本&#xff0c;以便计算机能够进一步处理和理解。它是自然语言处理技术的一部分&#xff0c;被广泛应用于语音识别助…
阅读更多...
Linux 之 systemctl

Linux 之 systemctl

systemctl 可以控制软件&#xff08;一般指服务&#xff09;的启动、关闭、开机自启动 能被systemctl 管理的软件&#xff0c;一般也称 服务 系统内置服务均可被 systemctl 控制第三方软件&#xff0c;如果 自动注册了 可被systemctl 控制第三方软件&#xff0c;如果没有自动…
阅读更多...
better scoll右 联左

better scoll右 联左

这是先拿一个数组装进我们所有 获取到的dom节点的 高度 因为算的 都是 到最上面的 高度&#xff0c;所以我们 要减去他的 高度 就得到自身的高度 然后给右边加一个滚动事件&#xff0c;得到每一次滑动的高度&#xff0c;在循环上面的数组&#xff0c;就是我们右边的 y就在算出…
阅读更多...
微信小程序实现日历功能、日历转换插件、calendar

微信小程序实现日历功能、日历转换插件、calendar

文章目录 演示htmlJavaScript 演示 效果图 微信小程序实现交互 html <view wx:if"{{calendarArr.length}}"><view class"height_786 df_fdc_aic"><view class"grid_c7_104"><view class"font_weight_800 text_align…
阅读更多...
Debezium日常分享系列之：定制Debezium 信号发送和通知

Debezium日常分享系列之：定制Debezium 信号发送和通知

Debezium日常分享系列之&#xff1a;定制Debezium 信号发送和通知 一、自定义信号和通知通道二、结论 Debezium 2.3 在信号和通知功能方面引入了新的改进。除了 Debezium 提供的预定义信号和通知通道之外&#xff0c;您还可以设置新的信号和通知通道。此功能使用户能够自定义系…
阅读更多...
微服务——服务异步通讯RabbitMQ

微服务——服务异步通讯RabbitMQ

前置文章 消息队列——RabbitMQ基本概念容器化部署和简单工作模式程序_北岭山脚鼠鼠的博客-CSDN博客 消息队列——rabbitmq的不同工作模式_北岭山脚鼠鼠的博客-CSDN博客 消息队列——spring和springboot整合rabbitmq_北岭山脚鼠鼠的博客-CSDN博客 目录 Work queues 工作队列…
阅读更多...
JS——输入输出语法数组的操作

JS——输入输出语法数组的操作

JavaScript输入输出语法 目标&#xff1a;能写出常见的JavaScript输入输出语法 输出语法 语法1&#xff1a; document.write(要输出的内容)作用&#xff1a; 向body内输出内容 注意&#xff1a; 如果输出的内容写的是标签&#xff0c;也会被解析成网页元素 语法2&#xff1a…
阅读更多...
Verilog语法学习——LV9_使用子模块实现三输入数的大小比较

Verilog语法学习——LV9_使用子模块实现三输入数的大小比较

LV9_使用子模块实现三输入数的大小比较 题目来源于牛客网 [牛客网在线编程_Verilog篇_Verilog快速入门 (nowcoder.com)](https://www.nowcoder.com/exam/oj?page1&tabVerilog篇&topicId301) 题目 描述 在数字芯片设计中&#xff0c;通常把完成特定功能且相对独立的…
阅读更多...
特殊矩阵的压缩存储

特殊矩阵的压缩存储

1 数组的存储结构 1.1 一维数组 各数组元素大小相同&#xff0c;且物理上连续存放。第i个元素的地址位置是&#xff1a;a[i] LOC i*sizeof(ElemType) (LOC为起始地址) 1.2 二维数组 对于多维数组有行优先、列优先的存储方法 行优先&#xff1a;先行后列&#xff0c;先存储…
阅读更多...
无涯教程-jQuery - Select menu组件函数

无涯教程-jQuery - Select menu组件函数

小部件选择菜单功能可与JqueryUI中的小部件一起使用&#xff0c;它提供了可替换样式的选择元素。一个简单的选择菜单如下所示。 Select menu - 语法 $( "#menu" ).selectmenu(); Select menu - 示例 以下是显示选择菜单用法的简单示例- <!doctype html> &…
阅读更多...
自动驾驶感知系统-全球卫星定位系统

自动驾驶感知系统-全球卫星定位系统

卫星定位系统 车辆定位是让无人驾驶汽车获取自身确切位置的技术&#xff0c;在自动驾驶技术中定位担负着相当重要的职责。车辆自身定位信息获取的方式多样&#xff0c;涉及多种传感器类型与相关技术。自动驾驶汽车能够持续安全可靠运行的一个关键前提是车辆的定位系统必须实时…
阅读更多...
Go语言进阶 + 依赖管理

Go语言进阶 + 依赖管理

依赖配置 - version开始&#xff0c;就开始很难听懂了&#xff0c;需要结合很多课后配套资料查阅很多文档和网站....然而好像没有那么多时间&#xff0c;一天给3小时学Go真的顶天了.....还有算法和Linux的Mysql... 这几天学Go已经把算法给挤掉了.....下步要权衡一下&#xff0c…
阅读更多...
Centos7中实现脚本使用mysqldump实现分库分表备份

Centos7中实现脚本使用mysqldump实现分库分表备份

脚本 #!/bash/bin userroot #用户名 password123456 #密码 back_path/backup/db databases_file/backup/databases.list [ -f $databases_file ] || touch /backup/databases.list if [[ ! -s ${databases_file} ]] then while read line do[ -d ${back_path}/$line ] …
阅读更多...
ERROR in unable to locate ‘***/public/**/*‘ glob

ERROR in unable to locate ‘***/public/**/*‘ glob

前提 自己搭了一个react项目的脚手架&#xff0c;npm包下载一切都很正常&#xff0c;启动的时候突然就报ERROR in unable to locate ***/public/**/* glob这个错误&#xff0c;根据百度分析了一下产生的原因&#xff1a;webpack配置文件中的CopyWebpackPlugin导致的 网上给出的…
阅读更多...
C语言指针应该这么学？

C语言指针应该这么学？

数组名的意义&#xff1a; 1. sizeof(数组名)&#xff0c;这里的数组名表示整个数组&#xff0c;计算的是整个数组的大小。 2. &数组名&#xff0c;这里的数组名表示整个数组&#xff0c;取出的是整个数组的地址。 3. 除此之外所有的数组名都表示首元素的地址。 根据以上数…
阅读更多...
用asp.net开发h5网页版视频播放网站,类似优酷,jellyfin,emby

用asp.net开发h5网页版视频播放网站,类似优酷,jellyfin,emby

之前用jellyfin开源软件搞了一个视频播放服务器,用来共享给家里人看电影和电视剧,jellyfin虽然各方面功能都很强大,但是界面和使用习惯都很不适合,于是就想着利用下班休息时间做一套自己喜欢的视频网站出来. 本来是打算直接用jellyfin的源码进行修改,源码是用C# netcore 写的服…
阅读更多...
【C++进阶：哈希--unordered系列的容器及封装】

【C++进阶：哈希--unordered系列的容器及封装】

本课涉及到的所有代码都见以下链接&#xff0c;欢迎参考指正&#xff01; practice: 课程代码练习 - Gitee.comhttps://gitee.com/ace-zhe/practice/tree/master/Hash unordered系列关联式容器 在C98中&#xff0c;STL提供了底层为红黑树结构的一系列关联式容器&#xff0c;在…
阅读更多...
使用Pytest生成HTML测试报告

使用Pytest生成HTML测试报告

背景 最近开发有关业务场景的功能时&#xff0c;涉及的API接口比较多&#xff0c;需要自己模拟多个业务场景的自动化测试&#xff08;暂时不涉及性能测试&#xff09;&#xff0c;并且在每次测试完后能够生成一份测试报告。 考虑到日常使用Python自带的UnitTest&#xff0c;所…
阅读更多...
最新文章

Copyright @ 2022~2023