PagePlug企业版案例（二）—表单生成Excel文件（中国式报表）并发送至邮箱中-CSDN博客

本文链接：https://blog.csdn.net/AppsmithCN/article/details/140099192

一、背景

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的数据处理：

如果在国内的话，可以使用国内源进行安装：https://gcore.jsdelivr.net/npm/exceljs@4.3.0/dist/exceljs.min.js
如果可以访问外网的话，可以使用：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")
      });
    })
  }
}