微信小程序——使用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
• 將雲存儲的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