藉助雲開發輕鬆實現後臺數據批量導出丨實戰

時間 2019-11-29

標籤藉助開發輕鬆實現後臺數據批量導出實戰简体版

原文原文鏈接

小程序導出數據到excel表，藉助雲開發後臺實現excel數據的保存

咱們在開發小程序的過程當中，可能會有這樣的需求：如何將雲數據庫裏的數據批量導出到excel表裏？
這個需求能夠用強大的雲開發輕鬆實現！
這裏須要用到雲函數，雲存儲和雲數據庫。能夠說經過這一個例子，把小程序雲開發相關的知識都用到了。下面就來介紹如何實現node

實現思路

1，建立雲函數
2，在雲函數裏讀取雲數據庫裏的數據
3，安裝node-xlsx類庫（node類庫）
4，把雲數據庫裏讀取到的數據存到excel裏
5，把excel存到雲存儲裏並返回對應的雲文件地址
6，經過雲文件地址下載excel文件

1、建立excel雲函數

關於如何建立雲開發小程序，這裏我就再也不作具體講解。不知道怎麼建立雲開發小程序的同窗，能夠去翻看騰訊云云開發公衆號內菜單【技術交流-視頻教程】中的教學視頻。數據庫

建立雲函數時有兩點須要注意的，給你們說下

一、必定要把app.js裏的環境id換成你本身的
2，你的雲函數目錄要選擇你對應的雲開發環境（一般這裏默認選中的）
不過你這裏的雲開發環境要和你app.js裏的保持一致

2、讀取雲數據庫裏的數據

咱們第一步建立好雲函數之後，能夠先在雲函數裏讀取咱們的雲數據庫裏的數據。npm

一、先看下咱們雲數據庫裏的數據
二、編寫雲函數，讀取雲數據庫裏的數據（必定要記得部署雲函數）
三、成功讀取到數據

把讀取user數據表的完整代碼給你們貼出來。json

// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: "test-vsbkm"
})
// 雲函數入口函數
exports.main = async(event, context) => {
  return await cloud.database().collection('users').get();
}

3、安裝生成excel文件的類庫 node-xlsx

經過上面第二步能夠看到咱們已經成功的拿到須要保存到excel的源數據，咱們接下來要作的就是把數據保存到excel小程序

一、安裝node-xlsx類庫

這一步須要咱們事先安裝node,由於咱們要用到npm命令，經過命令行

npm install node-xlsx

能夠看出咱們安裝完成之後，多了一個package-lock.json的文件
數組

4、編寫把數據保存到excel的代碼，

下圖是咱們的核心代碼：

這裏的數據是咱們查詢的users表的數據，而後經過下面代碼遍歷數組，而後存入excel。這裏須要注意咱們的id,name,weixin要和users表裏的對應。瀏覽器

for (let key in userdata) {
      let arr = [];
      arr.push(userdata[key].id);
      arr.push(userdata[key].name);
      arr.push(userdata[key].weixin);
      alldata.push(arr)
    }

還有下面這段代碼，是把excel保存到雲存儲用的微信

//4，把excel文件保存到雲存儲裏
    return await cloud.uploadFile({
      cloudPath: dataCVS,
      fileContent: buffer, //excel二進制文件
    })

下面把完整的excel裏的index.js代碼貼給你們,記得把雲開發環境id換成你本身的。app

const cloud = require('wx-server-sdk')
//這裏最好也初始化一下你的雲開發環境
cloud.init({
  env: "test-vsbkm"
})
//操做excel用的類庫
const xlsx = require('node-xlsx');

// 雲函數入口函數
exports.main = async(event, context) => {
  try {
    let {userdata} = event
    
    //1,定義excel表格名
    let dataCVS = 'test.xlsx'
    //2，定義存儲數據的
    let alldata = [];
    let row = ['id', '姓名', '微信號']; //表屬性
    alldata.push(row);

    for (let key in userdata) {
      let arr = [];
      arr.push(userdata[key].id);
      arr.push(userdata[key].name);
      arr.push(userdata[key].weixin);
      alldata.push(arr)
    }
    //3，把數據保存到excel裏
    var buffer = await xlsx.build([{
      name: "mySheetName",
      data: alldata
    }]);
    //4，把excel文件保存到雲存儲裏
    return await cloud.uploadFile({
      cloudPath: dataCVS,
      fileContent: buffer, //excel二進制文件
    })

  } catch (e) {
    console.error(e)
    return e
  }
}

5、把excel存到雲存儲裏並返回對應的雲文件地址

通過上面的步驟，咱們已經成功的把數據存到excel裏，並把excel文件存到雲存儲裏。能夠看下效果。

接着，就能夠經過上圖的下載地址下載excel文件了。

其實到這裏就差很少實現了基本的把數據保存到excel裏的功能了，可是爲了不每次導出數據都須要去雲開發後臺下載excel的麻煩，接下來介紹如何動態獲取下載地址。async

6、獲取雲文件地址下載excel文件

經過上圖咱們能夠看出，咱們獲取下載連接須要用到一個fileID,而這個fileID在咱們保存excel到雲存儲時，有返回，以下圖。咱們把fileID傳給咱們獲取下載連接的方法便可。

一、咱們獲取到了下載連接，接下來就要把下載連接顯示到頁面
二、代碼顯示到頁面之後，咱們就要複製這個連接，方便用戶粘貼到瀏覽器或者微信去下載。

下面是完整代碼：

Page({
  onLoad: function(options) {
    let that = this;
    //讀取users表數據
    wx.cloud.callFunction({
      name: "getUsers",
      success(res) {
        console.log("讀取成功", res.result.data)
        that.savaExcel(res.result.data)
      },
      fail(res) {
        console.log("讀取失敗", res)
      }
    })
  },

  //把數據保存到excel裏，並把excel保存到雲存儲
  savaExcel(userdata) {
    let that = this
    wx.cloud.callFunction({
      name: "excel",
      data: {
        userdata: userdata
      },
      success(res) {
        console.log("保存成功", res)
        that.getFileUrl(res.result.fileID)
      },
      fail(res) {
        console.log("保存失敗", res)
      }
    })
  },

  //獲取雲存儲文件下載地址，這個地址有效期一天
  getFileUrl(fileID) {
    let that = this;
    wx.cloud.getTempFileURL({
      fileList: [fileID],
      success: res => {
        // get temp file URL
        console.log("文件下載連接", res.fileList[0].tempFileURL)
        that.setData({
          fileUrl: res.fileList[0].tempFileURL
        })
      },
      fail: err => {
        // handle error
      }
    })
  },
  //複製excel文件下載連接
  copyFileUrl() {
    let that=this
    wx.setClipboardData({
      data: that.data.fileUrl,
      success(res) {
        wx.getClipboardData({
          success(res) {
            console.log("複製成功",res.data) // data
          }
        })
      }
    })
  }
})

梳理下上面代碼的邏輯：