PagePlug企业版案例（二）—表单生成Excel文件并发送至邮箱中

PagePlug企业版案例（二）—表单生成Excel文件并发送至邮箱中
一、背景

PagePlug是appsmith中国化项目，一款面向研发开发使用、开源的、前后端一体的低代码工具，拥有强大的可视化建模、数据库和API集成能力，目前已有将近超千家企业将PagePlug低代码开发工具融入内部研发体系，相较于传统的产研开发，使用PagePlug可大幅提升研发效率，节省项目迭代维护成本。更多介绍可点击下方文章查阅：
国内优秀的开源低代码框架：PagePlug，面向研发使用，拒绝重复、低价值的工单循环开发_低代码开源框架-CSDN博客文章浏览阅读3.6k次，点赞15次，收藏22次。面向研发使用、更懂国内企业的开源低代码_低代码开源框架https://blog.csdn.net/AppsmithCN/article/details/131380008随着移动设备的普及和便携性的提升，移动端表单的应用场景越来越广泛，例如企业内部的流程管理、客户服务、用户营销、资料收集等，这些应用场景都能够为企业的工作效率、营收等带来很大的帮助；本次案例将围绕我们常见的一个表单场景——新会员注册，通过PagePlug来搭建会员填写的资料表单，并拓展生成对应的excel文件，并发送至业务部门邮箱中，大家更能体会到PagePlug相较于市面上的表单无代码/低代码（例如：轻流、简道云、宜搭、微搭等），PagePlug与高代码的融合能力，能够满足业务侧更多的个性化需求

目前PagePlug的企业伙伴也有在下列的场景，例如：
- 业务数据分析：根据业务部门填写的表单据，生成对应的图表内容，并自动发送至各部门负责人的邮箱中
- 员工请假申请：员工可以在表单中填写请假事由、请假时间等信息，并生成对应的请假申请表格，自动发送给上级审批人和人力资源部门
- 出差报销表单：使用PagePlug搭建出差申请表单。员工可以填写报销表单（出差地点、时间、预算等），并上传相关发票和凭证。表单提交后，生成excel文件，交由HR和财务部门进行审批和报销处理
二、实战教程

2.1 前置准备
- 开发版本：企业版PagePlug-ee：v1.9.38
- 使用第三方exceljs库：https://gcore.jsdelivr.net/npm/exceljs@4.3.0/dist/exceljs.min.js
- 在邮箱中生成授权码（密码）功能
2.2 画布搭建移动端表单

本次案例搭建的表单是新会员在办理会籍时所填写的个人信息资料，在点击提交的时候，会生成一个excel文件发送至对应的业务部门邮箱中
- 画布类型选择移动端
- 在画布中可以先拖入一个Form表单组件，之后根据所需填写的资料及内容，选择对应的组件
2.3 生成邮箱测试密码

本次案例以阿里邮箱为例子，若使用其他的邮箱，可查阅相应的文档手册
- 点击右上角的设置，进入到账户安全的设置中，点击新密码
- 在邮箱设置中，可以查看发信/收信服务器地址
2.4 新建一个SMTP数据源
- 在左侧菜单栏中，选择添加数据源，选择SMTP图标
- 填写对应邮箱的Host address、Port、Username和PassWord（本次示例使用的是阿里云的邮箱服务），配置信息
2.5 新增一个Query查询
- 配置成功后，点击新建查询
- 会生成一个新的Query1，我们开始进行对应的内容配置
对应的功能字段介绍：
- From email ：设置消息发件人的邮件地址
- Reply to email：设置接收对该邮件所有回复的邮件地址
- To email(s)：设置接收该邮件的邮箱地址，对于多个收件人，请用逗号分隔地址；
- CC email(s)：设置接收该邮件的抄送邮箱地址，对于多个抄送收件人，请用逗号分隔地址；
- BCC email(s)：设置接收该邮件的密件抄送邮箱地址，对于多个密件抄送收件人，请用逗号分隔地址；
- Subject：设置邮件的主题内容
- Body type：可以设置邮件的内容形式是富文本类型或者是HTML
- Body：编辑邮件的具体内容
- Attachment(s)：可以将一个或多个文件添加到电子邮件，需要一个文件对象数组
2.6 安装第三方JS库

本次会使用到exceljs库进行excel的数据处理：
1. 如果在国内的话，可以使用国内源进行安装：https://gcore.jsdelivr.net/npm/exceljs@4.3.0/dist/exceljs.min.js
2. 如果可以访问外网的话，可以使用：https://cdn.jsdelivr.net/npm/exceljs@4.3.0/dist/exceljs.min.js
- 在工具库中新增exceljs库
- 可以自行选择上面的链接进行安装
2.7 新建一个JSobject
- 在左侧菜单栏中，新建一个JS对象（这段代码主要将表单中的组件值通过exceljs处理后，生成对应的excel文件，也支持对单元格背景颜色设置），并命名为：exceljs2，代码如下：
```
export default {
  myVar1: [],
  myVar2: {},
  test: () => {
    console.log("test01")
 
  },
  blobToBase64 (blob) {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.onload = (e) => {
        resolve(e.target.result);
      };
      // readAsDataURL
      fileReader.readAsDataURL(blob);
      fileReader.onerror = () => {
        reject(new Error('blobToBase64 error'));
      };
    });
  },
  async handleXlsx () {
    const workbook = new ExcelJS.Workbook();
    workbook.creator = 'Me';
    workbook.lastModifiedBy = 'Her';
    workbook.created = new Date(1985, 8, 30);
    workbook.modified = new Date();
    workbook.lastPrinted = new Date(2016, 9, 27);
    const worksheet = workbook.addWorksheet('My Sheet');
    //这里是数据列表
    const data = [Form1.data];
    // 设置列,这里的width就是列宽
    worksheet.columns = [
      { "header": ["会员资料填写", "", "序号"], "key": "id", "width": 10, },
      { "header": ["", "", "中文姓名"], "key": "cname", "width": 10 },
      { "header": ["", "", "英文姓名"], "key": "ename", "width": 10 },
      { "header": ["", "", "证件类型"], "key": "IDType", "width": 10 },
      { "header": ["", "", "身份证号码"], "key": "IDNumber", "width": 10 },
      { "header": ["", "", "出生日期"], "key": "birthday", "width": 10 },
      { "header": ["", "", "年龄"], "key": "age", "width": 10 },
      { "header": ["", "", "性别"], "key": "gender", "width": 10 },
      { "header": ["", "", "电话号码"], "key": "phone", "width": 10 },
      { "header": ["", "", "国籍"], "key": "nationality", "width": 10 },
      { "header": ["", "", "籍贯"], "key": "nativePlace", "width": 10 },
      { "header": ["", "", "出生地"], "key": "birthPlace", "width": 10 },
      { "header": ["", "", "婚姻状况"], "key": "maritalStatus", "width": 10 },
      { "header": ["", "", "民族"], "key": "ethnicity", "width": 10 },
      { "header": ["", "", "家庭地址"], "key": "address", "width": 10 },
    ]
 
    // 批量插入数据
    data.forEach(item => worksheet.addRow(item));
 
    // 设置表头1
    worksheet.mergeCells('A1:O1');
    worksheet.getCell('A1').alignment = { vertical: 'middle', horizontal: 'center' };
    worksheet.getCell('A1').font = { bold: true };
    worksheet.getCell('A1').fill = {
      type: "pattern",
      pattern: "solid",
      fgColor: {
        argb: "ffff00",
      }
    };
 
    // 设置表头2
    worksheet.mergeCells('P1:W1');
    worksheet.mergeCells('P2:S2');
    worksheet.mergeCells('T2:W2');
    worksheet.getCell('P1').alignment = { vertical: 'middle', horizontal: 'center' };
    worksheet.getCell('P2').alignment = { vertical: 'middle', horizontal: 'center' };
    worksheet.getCell('P1').font = { bold: true };
    // 设置单元格样式
    // 注意：在 exceljs 中所有的的颜色值均为 argb 格式，且不带 # 符号
    worksheet.eachRow((row, rowNumber) => {
      //表头样式
      if (rowNumber <= 3) {
        row.eachCell((cell, colNumber) => {
          cell.font = { size: rowNumber === 3 ? 14 : 16, color: { argb: 'f6ef1b' }, bold: true }
          cell.alignment = { horizontal: 'center', vertical: 'middle' }
          cell.fill = {
            type: "pattern",
            pattern: "solid",
            fgColor: {
              argb: colNumber > 15 ? "5108d3" : "1178d3",
            }
          }
          cell.border = (rowNumber === 1 || rowNumber === 3 || colNumber > 15) ? {
            top: { style: 'thin' },
            left: { style: 'thin' },
            right: { style: 'thin' }
          } : {}
        })
      }
      //设置数据列表样式
      if (rowNumber > 3) {
        row.eachCell(cell => {
          cell.font = { size: 12 };
          cell.alignment = { horizontal: 'center', vertical: 'middle' }
        });
      }
      //设置所有行高
      row.height = 30;
    });
 
    const buf = await workbook.xlsx.writeBuffer("aaa.xlsx");
    const blob = new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    // 下载文件到本地 可以注释掉
    // const url = URL.createObjectURL(blob);
    // await download(url, `employee.xlsx`)
    const sheetName = `面试者-${Form1.data.cname}.xlsx`
    await this.blobToBase64(blob).then(base64data => {
      storeValue("fileData", [
        {
          "type": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          "id": "uppy-employees/xlsx-1e-application/vnd.openxmlformats-officedocument.spreadsheetml.sheet-7632-1712905306789",
          "meta": {
            "relativePath": null,
            "name": sheetName,
            "type": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          },
          "name": sheetName,
          "size": 7632,
          "dataFormat": "Base64",
          data: base64data
        }
      ]);
      sendemail.run({ name: Form1.data.cname }).then(res => {
        showAlert("邮件已发送！", "success")
      });
    })
  }
}
```
2.8 执行JS函数
- 配置完JS逻辑后，在表单中的提交按钮绑定对应的JS执行事件
- 如果需要校验表单填写内容或提交后重置表单，可以点击按钮，并在右下角的表单设置中进行配置
2.9 发送测试
- 填写完表单内容并点击提交后，就会自动生成一个excel表格发送至对应的收件人邮箱中，我们可以去邮箱里面检查下
除此之外，可以基于Exceljs库将表单生成中国式报表（案例为样例数据，已做脱敏处理）例如：

三、其他相关案例
- 工程管理系统：优化数据源信息内容及审批流程
‍ 线上体验地址：工程管理系统
- 跨境电商仓库管理系统案例：该系统允许用户管理多个仓库的产品和库存、以及跟踪供应商产品和管理供应商
‍ 线上体验地址：跨境电商仓库系统

四、企业版的介绍

如果想了解PagePlug企业版/商业版的价格及更多功能，可放大下方图片查看

对PagePlug上一些功能使用讲解及介绍，可以点击下方文章查看

1、PagePlug企业版开发案例（一）——企微定时群发工具

PagePlug企业版开发案例（一）——企微定时群发工具_pageplug开源低代码融合工作流开发教程——保姆级实战开发-CSDN博客文章浏览阅读944次，点赞31次，收藏16次。快速开发内部应用工具，告别SaaS数据存储安全问题及个性化需求问题_pageplug开源低代码融合工作流开发教程——保姆级实战开发https://blog.csdn.net/AppsmithCN/article/details/135380573https://blog.csdn.net/AppsmithCN/article/details/1353805732、PagePlug开源低代码融合工作流开发教程——保姆级实战开发

PagePlug开源低代码融合工作流开发教程——保姆级实战开发-CSDN博客文章浏览阅读80次。PagePlug是一款面向研发开发使用、开源的、前后端一体的低代码工具，拥有强大的可视化建模和API集成能力，支持与工作流的融合，实现更强大的企业应用开发https://blog.csdn.net/AppsmithCN/article/details/134317961?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/134317961?spm=1001.2014.3001.55013、Formily开发实战——3分钟完成一个登录页的开发，Formily表单与PagePlug低代码的完美融合

Formily开发实战——3分钟完成一个登录页的开发，Formily表单与PagePlug低代码的完美融合_formily github-CSDN博客文章浏览阅读706次，点赞3次，收藏7次。Formily——更高效的表单解决方案与开源低代码Pageplug的融合_formily githubhttps://blog.csdn.net/AppsmithCN/article/details/130765565https://blog.csdn.net/AppsmithCN/article/details/1307655654、国内优秀的开源低代码框架：PagePlug，面向研发使用，拒绝重复、低价值的工单循环开发

国内优秀的开源低代码框架：PagePlug，面向研发使用，拒绝重复、低价值的工单循环开发_低代码开源框架-CSDN博客文章浏览阅读1.9k次，点赞2次，收藏7次。面向研发使用、更懂国内企业的开源低代码_低代码开源框架https://blog.csdn.net/AppsmithCN/article/details/131380008https://blog.csdn.net/AppsmithCN/article/details/1313800085、保姆级低代码实战教程——玩转PagePlug表格开发，增删改查分页如此简单

保姆级开源低代码实战教程——玩转PagePlug表格开发，增删改查分页如此简单_pageplug github-CSDN博客文章浏览阅读997次，点赞3次，收藏7次。面向研发使用开发的开源低代码，比低代码区别很大的，相较于轻流、简道云、轻宜搭、微搭、帆软、活字格等等的低代码灵活性及维护更好_pageplug githubhttps://blog.csdn.net/AppsmithCN/article/details/131210730https://blog.csdn.net/AppsmithCN/article/details/1312107306、PagePlug：低代码平台入门教程—10分钟搭建一个用户改查系统

PagePlug：低代码平台入门教程—10分钟搭建一个用户改查系统-CSDN博客文章浏览阅读635次，点赞2次，收藏5次。PagePlug，面向研发使用的开源低代码平台，10分钟搭建一个用户改查系统_pageplughttps://blog.csdn.net/AppsmithCN/article/details/131790256https://blog.csdn.net/AppsmithCN/article/details/1317902567、PagePlug低代码入门教程——与Websocket的集成

PagePlug低代码入门教程——与Websocket的集成_websockets.send body-CSDN博客文章浏览阅读154次，点赞2次，收藏2次。通过PagePlug低代码与Websocket集成，实现前端页面的数据实时通信_websockets.send bodyhttps://blog.csdn.net/AppsmithCN/article/details/132511483https://blog.csdn.net/AppsmithCN/article/details/1325114838、PagePlug组件使用技巧（一）——Iframe组件开发日程管理功能

PagePlug组件使用技巧（一）——Iframe组件开发日程管理功能https://blog.csdn.net/AppsmithCN/article/details/135654077

9、B站上也有一些案例教程，欢迎查看研究～～

欢迎点赞、收藏、喜欢三连鼓励下哟，避免找不到文章啦
相关阅读:
React-hooks有哪些用法？
Tensor 的广播机制
 014python-内置函数
 Vue基础语法【上】
淘口令真实url API 返回值说明
 Java计算机毕业设计德云社票务系统源码+系统+数据库+lw文档
 【Spring boot 使用其他 json 转换框架】
【C++中预处理语句 include、define、if】
MuLogin浏览器如何在一台设备上安全登录和管理多个LinkedIn账户？
＜蓝桥杯软件赛＞零基础备赛20周--第4周--杂题-1
原文地址：https://blog.csdn.net/AppsmithCN/article/details/140099192

一、背景

二、实战教程

2.1 前置准备

2.2 画布搭建移动端表单

2.3 生成邮箱测试密码

2.4 新建一个SMTP数据源

2.5 新增一个Query查询

2.6 安装第三方JS库

2.7 新建一个JSobject

2.8 执行JS函数

2.9 发送测试

三、其他相关案例

四、企业版的介绍