背景

• 在学习微信小程序的过程中，需要导出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
• 将云存储的excel文件以图片的格式下载到本地；修改图片文件后缀为xlsx，成为excel文件
  • 代码如下

    //导出excelfunction 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