首页 > 编程语言 >微信小程序 Notes | 常用开发事例(五)基于云平台导出 Excel

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

时间:2022-11-11 22:35:28浏览次数:51  
标签:微信 Notes Excel 获取 地址 let res wx


微信小程序 Notes | 常用开发事例(五)基于云平台导出 Excel_上传

一、前言

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

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

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

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

简单说一下需求吧:

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

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

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

文末已附上参考链接。

二、需求分析

经过前期多(du)方(zi)探索,明确如下关键几点:

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

基于以上两点,明确以下开发流程:

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

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

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

三、实际开发

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

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

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

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

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

微信小程序 Notes | 常用开发事例(五)基于云平台导出 Excel_下载地址_02

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

微信小程序 Notes | 常用开发事例(五)基于云平台导出 Excel_数据_03

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

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

代码如下:

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

cloud.init()

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

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

微信小程序 Notes | 常用开发事例(五)基于云平台导出 Excel_小程序_04

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

微信小程序 Notes | 常用开发事例(五)基于云平台导出 Excel_上传_05

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();
}
})
}
});
},

标签:微信,Notes,Excel,获取,地址,let,res,wx
From: https://blog.51cto.com/u_13346181/5845496

相关文章

  • 微信小程序 Notes | 开发常用事例(四)
    前言希望多多少少可以帮助到像我一样的前端小白。这年头,挣钱不易,小作坊生存不易!且行且珍惜吧。1、Listitem和button冲突怎么玩?这个事情是这样的,由于韩总死乞白赖的非要......
  • 微信小程序经纬度转化为具体位置(逆地址解析)
    小程序wx.getLocation只能获取经纬度,这时候想要具体地址就需要借助第三方sdk(逆地址解析)我这边第三方以腾讯位置服务举例一.首先小程序需要申请wx.getLocation接口权......
  • 淘宝客微信机器人API接口,淘客机器人API,微信机器人API
    淘宝客微信机器人API接口,淘客机器人API,微信机器人API微信二次开发完整API功能文档地址:wkteam.gitbook.io**首先了解一下微信机器人API是什么?**E云API是一个能将个人......
  • 微信小程序 页面跳转
    //关闭当前页面,返回上一页面或多级页面。可通过getCurrentPages()获取当前的页面栈,决定需要返回几层wx.navigateTo({url:'page/home/home?user_id=111'})wx.navi......
  • 如何通过Java导出带格式的 Excel 数据到 Word 表格
    在Word中制作报表时,我们经常需要将Excel中的数据复制粘贴到Word中,这样则可以直接在Word文档中查看数据而无需打开另一个Excel文件。但是如果表格比较长,内容就会存在一定程......
  • Vue3实现动态导入Excel表格数据
    1. 前言在开发工作过程中,我们会遇到各种各样的表格数据导入,大部分我们的解决方案:提供一个模板前端进行下载,然后按照这个模板要求进行数据填充,最后上传导入,这是其中一种......
  • 微信DAT文件解密(dat转图像)
    微信电脑版现在已经是日常工作生活必不可少的工具,有时候删除了聊天记录或者被系统清理软件清理了,但还想查看曾经的微信聊天图片。这个时候辛辛苦苦找到了文件,却发现无法查......
  • vue 通过xlsx插件实现导出excel
    ``点击查看代码/*eslint-disable*/import{saveAs}from'file-saver'import*asXLSXfrom'xlsx'import{Message}from'element-ui';import{findTree......
  • 微信小程序
    小程序小程序的模块语法文本渲染{{msg}}条件渲染wx:if=""wx:elif=""wx:else列表渲染wx:for="{{list}}"{{item}}{{index}}wx:key="index"自定义列表渲染定义i......
  • 拓端tecdat|excel代写构建柯布-道格拉斯Cobb-Douglas生产函数的可视化
    我使用excel来构建Cobb-Douglas生产函数的可视化。生产函数将任何给定公司的输出表示为两个输入(人工和资本)和参数(α和β)的函数。当α和β之和等于1时,可以证明它们分别代表......