目錄

• 1.前端主導流程：
  
• 2. 外掛使用及初始化
  
• 2.1 藉助-admin中提供的方法。
• 2.2 安裝外掛依賴。
• 2.3 回撥函式內容如下
• 3.對後臺資料進行處理，完成想要的效果
• 3.1 準備一個數據處理函式（最後會在回撥裡面使用）
• 3.2 先處理表頭，定義一個物件，目的是待會將表頭的英文轉成中文
• 3.3 定義表頭
• 3.4 要處理後臺返回資料
• 3.5 表頭處理邏輯
• 3.6 表格data處理邏輯
• 3.7 函式返回
• 3.8 最終完成
• 總結：

1.前端主導流程：

1.點選頁面中匯出按鈕（註冊點選事件）

2.事件回撥裡面，傳送請求後臺資料

3.對後臺資料進行處理，完成想要的效果

4.生成Excel檔案

2. 外掛使用及初始化

2.1 藉助vuwww.cppcns.come-admin中提供的方法。

將其外掛包複製貼上到自己專案下的src資料夾下面

2.2 安裝外掛依賴。

注：大概率會報錯，這個階段出啥錯基本都是依賴沒安裝，都裝上就好了

npm install file-saver script-loader --save

2.3 回撥函式內容如下

當我們正式點選`匯出`按鈕之後，才去載入vendor資料夾中的Export2Excel模組

當我們正式點選`匯出`按鈕之後，才去載入vendor資料夾中的Export2Excel模組
import('@/vendor/Export2Excel').then(excel => {
  // excel表示匯入的模組物件      //import方法執行完畢返回的是一個promise物件，
                                 // 在then方法中我們可以拿到使用的模組物件
  console.log(excel)
  excel.export_on_to_excel({
    header: ['姓名','工資'],// 表頭 必填
    data: [
      ['劉備',100],/www.cppcns.com
 
/重點關注data的配置部分，我們發現它需要一個嚴格的二維陣列
      ['關羽',500]
    ],// 具體資料 必填
    filename: 'excel-list',// 檔名稱
    autoWidth: true,// 寬度是否自適應
    bookType: 'xlsx' // 生成的檔案型別
  })
})

Excel匯出引數說明

注意：到這裡為止，其實已經完成了簡單的匯出效果，用的是自己寫的假資料。實際專案中肯定是拿的後臺返回的資料，並且要對格式做修改，達到我們想要的效果（真測試了，上面的步驟跟著做就可完成。） 效果如下：

3.對後臺資料進行處理，完成想要的效果

比如說後臺返回的表頭是英文需要轉化成中文，然後格式不是外掛要的格式。

後臺返回資料：

需要將key轉成中文，將value抓換成陣列。

3.1 準備一個數據處理函式（最後會在回撥裡面使用）

3.2 先處理表頭，定義一個物件，目的是待會將表頭的英文轉成中文

const map = {
        'id': '編號','password': '密碼','mobile': '手機號','username': '姓名','timeOfEntry': '入職日期','formOfEmployment': '聘用形式','correctionTime': '轉正日期','workNumber': '工號','departmentName': '部門','staffPhoto': '頭像地址'
      }

3.3 定義表頭

header =EmcNmIx [待會將英文的表頭轉成中文的，是個陣列的形式]

如下程式碼所示效果：

header = ['id','mobile','username',……]

3.4 要處理後臺返回資料

後臺返回陣列，定義one是第一個資料，目的是以第一個資料為樣本設定表頭，如果第一條資料是false的話，說明後臺啥也沒返回，那就全劇終。

如下程式碼所示效果：

const one = list[0]
      if (!one) {
        return { header,data }
      }

3.5 表頭處理邏輯

01 `Object.keys(one) ` 這個是遍歷物件取出key組成一個數組。

02 ` map` 方法遍歷對每一個項進行做事返回一個數組

03 `return map[key] ` 可以看做 map.id = '編號'（便於理解）；map方法不停的對map物件做事而map[key]其實就是值，如 ‘編號'、‘部門'… 然後組成一個數組 如：['姓名','工資']

header = Object.keys(one).map(key => {
        return map[key]
      })

3.6 表格data處理邏輯

目標：後臺返回正式員工和非正式員工用1和2表示，我們需要將數字轉成文字，並且需要讓他們變成陣列的格式。

01-首先後臺返回的Obj['formOfEmployment']是數字1,2 我們要他們變成---> '正式'， '非正式'

02-obj['formOfEmployment'] = hireTypEnmu[key] 這段程式碼意思是將漢字設定給左邊的數字，實現替換。我們分別看左右代表什麼。

03- obj['formOfEmployment'] 此時是數字

04-hireTypEnmu:{1:'正式',EmcNmIx'2':'非正式' }這是我們自己定義的物件

05-hireTypEnmu[key] --key是數字--所以他是value是漢字

如下程式碼所示效果：

// data把list中每一個物件轉成 對應的value陣列
 // hireTypEnmu:{1:'正式','2':'非正式' }
      data = list.map(obj => {
        // 把  Obj['formOfEmployment']: 1,2   ---> '正式'， '非正式'
        const key = obj['formOfEmployment'] // 1,2
        obj['formOfEmployment'] = hireTypEnmu[key]
 
        return Object.values(obj)
      })

3.7 函式返回

將處理好的資料返回

return { header,data }

3.8 最終完成

這個時候，將這個函式拿到回撥函式裡面，header和data的資料之前已經有了。

完成程式碼如下：

hExport() {
      import('@/vendor/Export2Excel').then(async excel => {
        // 發ajax請求，獲取資料
        const res = await getEmployee(this.page,this.size)
        const list = res.data.rows
        console.log('從後端獲取的資料',list)
 
        const { header,data } = this.formatData(list)
        // excel表示匯入的模組物件
        console.log(header,data)
        excel.export_json_to_excel({
          // header: ['姓名',// 表頭 必填
          header: header,// 表頭 必填
          data: data,filename: 'excel-list',// 檔名稱
          autoWidth: true,// 寬度是否自適應
          bookType: 'xlsx' // 生成的檔案型別
        })
      })
    },

總結：

以上程式碼經過測試，可以直接使用達成效果。

附：vue-element-admin碼雲拉取，這個版本是二次開發功能多的那款

# git clone https://.com/panjiachen/vue-element-admin.git  # 從github上拉取程式碼
$ git clone https://gitee.com/mirrors/vue-element-admin.git # 從碼雲上拉取
$ cd vue-element-admin # 切換到具體目錄下
$ npm install  # 安裝所有依賴
$ npm run dev  # 啟動開發除錯模式  檢視package.json檔案的scripts可知曉啟動命令

到此這篇關於Vue匯出Excel功能的文章就介紹到這了,更多相關Vue匯出Excel功能內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！