微信小程序——使用excel-export导出excel

Posted 2020-11-26 话·醉月

背景

• 在学习微信小程序的过程中，需要导出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文件
  • 代码如下

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