微信小程序 Notes ｜ 常用开发事例基于云平台导出 Excel

Posted 2022-12-05 HLQ_Struggle

历史文章回顾：

• 微信小程序 ｜ 开发常用事例（一）
• 微信小程序 ｜ 开发常用事例（二）
• 微信小程序 Notes ｜ 开发常用事例（三）
• 微信小程序 Notes ｜ 开发常用事例（四）

一、前言

最近一直处于微信小程序的开发之中，未曾想过，好好的 android 开发变成了“东北乱炖”，这个刺激，酸爽，无与伦比！

不过好处在于接触面儿多了，思维发散了，想问题也似乎多了一种方式。

个人习惯开发时常整理笔记，总结记录是一方面，另一方面也是多多少少证明自己在这个行业曾经为之奋斗过。

感谢这个时代，也感谢各位前辈，站在巨人的肩膀继续努力，分享自己的点滴，帮助后赶来的小伙伴，一起加油～

简单说一下需求吧：

• 将用户填报的数据整理 Excel 文件，并提供下载链接地址。

本文不会对基础环境配置做过多说明，默认已具备云开发环境～

下面进行着手分析、编码实现，欢迎交流～

文末已附上参考链接。

二、需求分析

经过前期多（du）方（zi）探索，明确如下关键几点：

• 我们需要借助 node-xlsx 创建 Excel 并上传云平台进行存储；
• 提供下载地址需要设置有效期，安全为主。

基于以上两点，明确以下开发流程：

• 第一步，获取用户之前填报数据；
• 第二步，基于 node-xlsx 将获取到的填报数据进行 Excel 填充；
• 第三步，将生成的 Excel 文件同步上传云平台，获取到当前 fileID；
• 第四步，根据 fileID 获取下载地址，并设置有效期；
• 第五步，将下载地址复制到用户粘贴板，以供用户进行分享、下载。

将需求进行大概梳理后，是不是就感觉一目了然了呢？

下面开始实际开发，当然过程会遇到想不到的意外，别担心，别慌，一个个 fix 就好～

三、实际开发

个人推荐，每个云函数编写完，都本地测试下，多打点 log，前期麻烦了，后期也就省事儿了。

记得测试没问题之后选择「上传并部署：云端安装依赖，不上传 node_modules」

每个云函数都需要上传哦～

3.1 添加获取填报信息云函数/接口

根据上面分析，我们第一步需要去云平台拉取之前用户填报的数据，也就是说我们需要创建一个获取用户数据的云函数，操作步骤如下：

在 cloudfunctions 目录下选择“新建 Node.js 云函数”，随后填入获取填报数据名称，也就是云函数/接口名称，比如说这里我叫 getReportData ，创建完成后如下所示：

接下来在 index.js 中添加获取数据库表内数据即可。关键内容：

• collection(‘云平台数据库集合名称’).get() ： 获取集合数据

代码如下：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => 
  return await cloud.database().collection('DataReport').get();

随后开启云函数本地调试，测试下，看下输出结果：

3.2 借助 node-xlsx 生成 Excel 并上传云平台

同样需要创建一个将获取到的填报数据组装成 Excel 的函数，这个函数主要功能为：

• 处理数据：包含数据的组装，每个不同的 sheet 对应的数据内容格式处理；
• 生成 Excel 并上传云平台，获取到 fileID。

fileID 是后续换取下载链接的。因为我们的业务是需要设置导出 Excel 名称带有导出时间，这块大家需要注意下小程序获取时间异常（其实就是时区导致获取到的时间比实际少 8 小时）。

部分代码如下，已隐去部分业务代码：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 操作 Excel 类库
const xlsx = require('node-xlsx');

// 云函数入口函数
exports.main = async (event, context) => 
  try 
    let  reportList  = event;
    // 定义 Excel 表名 
    let dataCVS = 'online-excel/资料表-' + processDate() + '.xlsx';
    // 定义存储数据
    let allData = [];
    // 定义表属性
    let row = ['序号', '地区'];
    allData.push(row);
    // 组装数据
    let tempKey = 1;
    for (let key in reportList) 
      let arr = [];
      let reportBean = reportList[key];
      arr.push(tempKey++); // 序号
      arr.push(reportBean.report_yacht_address); // 地区
      // ...
      allData.push(arr);
    
    // 将数据保存到 Excel 中
    var buffer = await xlsx.build([
      name: "总数据",
      data: allData
    ]);
    // 把 Excel 文件保存到云存储中
    return await cloud.uploadFile(
      cloudPath: dataCVS,
      fileContent: buffer
    );
   catch (e) 
    console.error(e);
    return e;
  


/**
 * 获取东 8 区时间
 */
function getEast9Time() 
  // 目标时区，东8区 
  const targetTimezone = -8;
  // 当前时区与中时区时差，以min为维度
  const dif = new Date().getTimezoneOffset();
  // 本地时区时间 + 本地时区时差  = 中时区时间
  // 目标时区时间 + 目标时区时差 = 中时区时间
  // 目标时区时间 = 本地时区时间 + 本地时区时差 - 目标时区时差
  // 东8区时间 
  return new Date().getTime() + dif * 60 * 1000 - (targetTimezone * 60 * 60 * 1000);


/**
 * 获取格式化后时间格式
 */
function processDate() 
  // 时间格式化 由于最终生成在线地址，: 是特殊字符，因此时间时分秒间不添加任何字符
  date = new Date(getEast9Time());
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? ('0' + m) : m;
  var d = date.getDate();
  d = d < 10 ? ('0' + d) : d;
  var h = date.getHours();
  h = h < 10 ? ('0' + h) : h;
  var minute = date.getMinutes();
  minute = minute < 10 ? ('0' + minute) : minute;
  var second = date.getSeconds();
  second = second < 10 ? ('0' + second) : second;
  return y + '-' + m + '-' + d + ' ' + h + '' + minute + '' + second;
;

随后在此函数目录右键选择“在外部终端窗口打开”，准备安装 node-xlsx。

• npm install node-xlsx

3.3 获取下载地址

通过 getTempFileURL 方法获取下载地址并设置有效期，记得对地址进行编码，防止中文～

3.4 拷贝下载地址到用户粘贴板

通过 setClipboardData/getClipboardData 即可。

四、完整 js 代码

  /**
   * 一键导出 Excel
   */
  onExportExcelClick() 
    let that = this;
    // 必须登录
    if (app.globalData.userInfo == null) 
      msg.showToast('请登录后再进行数据导出！');
      return;
    
    wx.showLoading(
      title: '数据拉取中...',
    );
    //  读取数据填报数据
    wx.cloud.callFunction(
      name: 'getReportData',
      success: res => 
        console.log("---> 读取成功", res.result.data);
        that.saveExcel(res.result.data);
      ,
      fail: err => 
        wx.hideLoading();
        console.log('---> 读取失败', err);
      
    );
  ,

  /**
   * 将数据保存到 Excel 中并存储到云存储中
   * @param 读取到的数据填报信息 reportList 
   */
  saveExcel(reportList) 
    let that = this;
    wx.showLoading(
      title: '数据合成中...',
    );
    wx.cloud.callFunction(
      name: "getExportExcel",
      data: 
        reportList: reportList
      ,
      success: res => 
        console.log("---> 保存成功", res);
        that.getExcelDownLoadUrl(res.result.fileID);
      ,
      fail: err => 
        wx.hideLoading();
        console.log("---> 保存失败", err);
      ,
    );
  ,

  /**
   * 获取 Excel 下载地址
   * @param * fileID 
   */
  getExcelDownLoadUrl(fileID) 
    let that = this;
    wx.showLoading(
      title: '数据解码中...',
    );
    wx.cloud.getTempFileURL(
      fileList: [
        fileID: fileID,
        maxAge: 60 * 60 * 24, // 有效期 24 小时 
      ],
      success: res => 
        console.log("---> 获取 Excel 下载地址:", res);
        that.copyExcelDownloadUrl(encodeURI(res.fileList[0].tempFileURL));
      ,
      fail: err => 
        wx.hideLoading();
        console.log("---> 获取 Excel 下载地址失败", err);
      
    );
  ,

  /**
   * 复制 Excel 下载地址
   * @param * excelDownloadUrl 
   */
  copyExcelDownloadUrl(excelDownloadUrl) 
    console.log("---> 获取 Excel 解码地址 ：", excelDownloadUrl);
    wx.setClipboardData(
      data: excelDownloadUrl,
      success: res => 
        wx.getClipboardData(
          success: (option) => 
            wx.hideLoading();
            msg.showToast('文件下载地址复制剪贴板～');
          ,
          fail: (err) => 
            wx.hideLoading();
          
        )
      
    );
  ,

五、问题汇总

• Q 1：开启云平台本地测试提示：node modules 未安装，是否忽略并继续？
• 通过终端进入当前云函数目录下执行 npm install 即可

六、参考资料

• 微信官方文档
• 小程序导出数据到excel表，借助云开发后台实现excel数据的保存
• JavaScript encodeURI() 函数