vue-admin-template 新手學習（六） 導出excel

https://github.com/null2014/shopsmanagement

需要先安裝三個依賴

npm install -S file-saver xlsx

npm install -D script-loader

封裝Export2Excel.js

function generateArray(table) {
  var out = [];
  var rows = table.querySelectorAll('tr');
  var ranges = [];
  for (var R = 0; R < rows.length; ++R) {
    var outRow = [];
    var row = rows[R];
    var columns = row.querySelectorAll('td');
    for (var C = 0; C < columns.length; ++C) {
      var cell = columns[C];
      var colspan = cell.getAttribute('colspan');
      var rowspan = cell.getAttribute('rowspan');
      var cellValue = cell.innerText;
      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

      //Skip ranges
      ranges.forEach(function (range) {
        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
        }
      });
   formatJson(filterVal,jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if ( j === 'createdate') {
          return parseTime(v[j])
        }else{
          return v[j]
        }
      }))
    }
  }
}

在使用的地方寫handleDownload方法

handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['Id', 'Title', 'Author', 'Stataus', 'Date']
        const filterVal = ['id', 'title', 'author', 'status', 'display_time']
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVa

 

還沒有確定是否有分頁的話不能全部數據下載，後續待。。。