微信小程序——使用excel-export导出excel
背景
- 在学习微信小程序的过程中,需要导出excel文件数据,可是却没有后台服务器,所以只能够想着使用纯前端去导出excel
- 使用插件:excel-export
导出思想
- 将数据封装成excel文件
- 将excel文件上传到云存储中
- 将云存储的excel文件以图片的格式下载到本地
- 修改图片文件后缀为xlsx,成为excel文件
操作
- 将数据封装成excel文件;将excel文件上传到云存储中
- 建立云函数(我的云函数名称:uploadexportfile),打开云函数终端,安装excel-export插件
- 开发代码
// 云函数入口文件 const cloud = require('wx-server-sdk') const nodeExcel = require('excel-export'); const path = require('path'); cloud.init() // 云函数入口函数 exports.main = async (event, context) => { var tableMap = { styleXmlFile:path.join(__dirname,"styles.xml"), name: Date.now()+"-export", cols: [], rows: [], } var tableHead = ["编号", "名称", "生日", "年龄"]; //添加表头 for(var i=0;i<tableHead.length;i++){ tableMap.cols[tableMap.cols.length]={ caption:tableHead[i], type:'string' } } //表体:伪数据 const tableList = [ {编号:0,名称:'张三',生日:'2019-5-1',年龄:20}, {编号:1,名称:'李四',生日:'2019-5-1',年龄:45} ] //添加每一行数据 for(var i=0;i<tableList.length;i++){ tableMap.rows[tableMap.rows.length]=[ tableList[i].编号, tableList[i].名称, tableList[i].生日, tableList[i].年龄 ] } //保存excelResult到相应位置 var excelResult = nodeExcel.execute(tableMap); var filePath = "outputExcels"; var fileName = cloud.getWXContext().OPENID + "-" + Date.now()/1000 + '.xlsx'; //图片上传到云存储 return await cloud.uploadFile({ cloudPath: path.join(filePath, fileName), fileContent: new Buffer(excelResult,'binary') }).then(res=>{ console.log(res.fileID); return res; }).catch(err=>{ }); }
- Next
- 建立云函数(我的云函数名称:uploadexportfile),打开云函数终端,安装excel-export插件
- 将云存储的excel文件以图片的格式下载到本地;修改图片文件后缀为xlsx,成为excel文件
- 代码如下
//导出excel function exportFile(dataHeader,dataList){ wx.showLoading({ title: '正在导出', }); console.log(dataHeader); console.log(dataList); wx.cloud.callFunction({ name:'uploadexportfile', data:{ dataHeader:dataHeader, dataList:dataList } }).then(res=>{ const fileID = res.result.fileID; //下载文件 wx.cloud.downloadFile({ fileID: fileID }).then(res1 => { this.saveFileToPhotosAlbum(res1);//保存文件到相册 this.delCloudFile(fileID);//删除云存储文件 }).catch(error => { // handle error }) }).catch(err1=>{ }); } //保存文件到本地相册 function saveFileToPhotosAlbum(res){ //授权 this.writePhotosAlbumAuth(); // 保存文件 var saveTempPath = wx.env.USER_DATA_PATH + "/exportFile"+new Date().getTime()+".jpg"; wx.saveFile({ tempFilePath: res.tempFilePath, filePath: saveTempPath , success:res1=> { //获取了相册的访问权限,使用 wx.saveImageToPhotosAlbum 将图片保存到相册中 wx.saveImageToPhotosAlbum({ filePath: saveTempPath , success: res2 => { //保存成功弹出提示,告知一下用户 wx.hideLoading(); wx.showModal({ title: '文件已保存到手机相册', content: '文件位于tencent/MicroMsg/WeiXin下 \r\n将保存的文件重命名改为[ .xlsx ]后缀即可正常打开', confirmColor: '#0bc183', confirmText: '知道了', showCancel: false }); }, fail(err2) { console.log(err2) } }) } }); } //删除云存储文件 function delCloudFile(fileID){ const fileIDs=[]; fileIDs.push(fileID); //删除云存储中的excel文件 wx.cloud.deleteFile({ fileList: fileIDs, success: res4 => { // handle success console.log(res.fileList); }, fail: console.error }) } //上传单个文件 function uploadSingleFile(cloudPath,filePath){ wx.cloud.uploadFile({ cloudPath: cloudPath, // 上传至云端的路径 filePath: filePath, // 小程序临时文件路径 success: res => { // 返回文件 ID console.log(res.fileID) }, fail: console.error }) } //微信图片保存到本地相册授权 function writePhotosAlbumAuth(){ wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope:'scope.writePhotosAlbum', success() { console.log('授权成功') } }) } } }) } module.exports={ uploadSingleFile:uploadSingleFile, exportFile:exportFile, saveFileToPhotosAlbum:saveFileToPhotosAlbum, delCloudFile:delCloudFile, writePhotosAlbumAuth:writePhotosAlbumAuth }
- Next
- 代码如下
- Next