Vue實現表格導出Excel

格式

這個作業屬於哪個課程	2020春S班（福州大學）
這個作業要求在哪里	個人作業——軟件工程實踐總結&個人技術博客
這個作業的目標	< 個人技術總結 >
作業正文	個人作業——軟件工程實踐總結&個人技術博客
其他參考文獻	暫無

1.描述這個技術是做什么？學習該技術的原因，技術的難點在哪里。

這個技術是在前端Vue框架中導出Excel表格。學習該技術的原因在於我們團隊的社團管理系統這個項目中，管理員界面的數據基本上都是作為表格呈現的，為了方便管理員進行數據的統計，我們決定加入導出Excel這個功能。技術難點在於數據的獲取。

2.描述你是如何實現和使用該技術的。

• 安裝npm
  額外安裝npm install file-saver --save和npm install xlsx --save依賴或者在項目打開時重新npm install，會自動安裝所需要的依賴。
• 在/src目錄下的vendor文件夾（如果沒有則新建一個）存入Export2Excel.js文件
  點擊下載
• 在/build/webpack.base.conf.js中新增一行代碼如下：

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    'vendor': path.resolve(__dirname, '../src/vendor') // 新增這一行
    }
}

流程圖繪制如下：

具體如何使用要根據案例特定分析。以下以我們團隊做的項目——“知社”為例分析：
1.首先要創建一個按鈕綁定具體的事件，下例中:loading="downloadLoading"是添加一個加載loading狀態，初始值置false，當點擊按鈕時置true顯示正在加載中，導出完成置回false（詳細看下面的事件處理），這個變量能夠給用戶一個提示，增加系統友好的交互性。

<el-button
        :loading="downloadLoading"
        type="primary"
        icon="el-icon-document"
        @click="handleDownload"
      >導出Excel</el-button>

2.編寫handleDownload事件
變量解釋：tHeader是導出后表格的標題，filterVal是對應內容的變量名，filename是導出的文件名，可自定義，autoWidth置true，讓導出表格的數據展示能夠比較美觀，formatJson方法則是傳入數據列表和需要導出列表這兩個參數進行遍歷賦值操作。
特別聲明：param是調用所需接口的參數，可根據實際情況進行修改，由於使用原本展示的列表無法獲取所有數據，所以就把limit置為一個較大的數，重新獲取新的數據列表導出。這個方法比較簡單，不需要改動較多的地方，對於要求不是非常嚴格的項目推薦使用這種方法。

handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [
          '社團名稱',
          '活動名稱',
          '活動標題',
          '活動內容',
          '開始時間',
          '結束時間',
          '活動場地'
        ]
        const filterVal = [
          'clubName',
          'name',
          'title',
          'content',
          'startDate',
          'endDate',
          'location'
        ]
        const param = {
          clubName: this.form.clubName,
          state: this.form.state,
          page: 1,
          limit: 100000
        }
        getActivityApplyListData(param).then(response => {
          if (response.status === 200) {
            this.activityApplyExcelList = response.data.items
            const list = this.activityApplyExcelList
            const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: this.filename,
              autoWidth: this.autoWidth,
              bookType: 'xlsx'
            })
            this.downloadLoading = false
          } else {
            return this.$message.error('導出社團活動申請excel失敗')
          }
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    }

3.技術使用中遇到的問題和解決過程。

技術使用過程中遇到的問題：
由於項目中的表格是分頁的，通過前端頁面設置傳入不同的參數展示對應條數的數據，而不是獲取整個信息列表，這就意味着不能通過展示的列表直接導出對應的Excel文檔，會造成信息的缺失。舉個例子，活動申請信息列表共存在25條信息，默認設置展示5條，且停留在第一頁。若不額外加入控制，使用導出功能則只會導出1~5條信息，后面的信息無法全部導出。

解決過程：
重新調用獲取列表的接口，將傳參中的limit改為一個較大的數值即可，即上述例子中的param結構。

4.總結

沒有接觸的時候覺得導出excel挺難的，但是嘗試之后發現比想象中的容易。一開始數據比較少的時候實現了導出excel，以為就解決了，結果等數據一多才發現使用展示列表只能導出展示的那些數據，又回去改。下次再遇到這類問題的時候就懂得如何處理了，特此記錄一下。

5.參考文獻、參考博客

解決辦法來自團隊組長提供的幫助，暫無參考文獻和博客。