欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue導(dǎo)出Excel功能的全過程記錄

 更新時(shí)間：2021年07月06日 11:06:43   作者：接著奏樂接著舞。  
在開發(fā)后臺(tái)管理系統(tǒng)的時(shí)候,很多地方都要用到導(dǎo)出excel 表格,比如將table中的數(shù)據(jù)導(dǎo)出到本地,這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)出Excel功能的相關(guān)資料,需要的朋友可以參考下

1.前端主導(dǎo)流程：

1.點(diǎn)擊頁面中導(dǎo)出按鈕（注冊點(diǎn)擊事件）

2.事件回調(diào)里面，發(fā)送請求后臺(tái)數(shù)據(jù)

3.對后臺(tái)數(shù)據(jù)進(jìn)行處理，完成想要的效果

4.生成Excel文件

2. 插件使用及初始化

2.1  借助vue-admin中提供的方法。

將其插件包復(fù)制粘貼到自己項(xiàng)目下的src文件夾下面

2.2  安裝插件依賴。

注：大概率會(huì)報(bào)錯(cuò)，這個(gè)階段出啥錯(cuò)基本都是依賴沒安裝，都裝上就好了

npm install file-saver script-loader --save

2.3  回調(diào)函數(shù)內(nèi)容如下

當(dāng)我們正式點(diǎn)擊`導(dǎo)出`按鈕之后，才去加載vendor文件夾中的Export2Excel模塊

當(dāng)我們正式點(diǎn)擊`導(dǎo)出`按鈕之后，才去加載vendor文件夾中的Export2Excel模塊
import('@/vendor/Export2Excel').then(excel => {
  // excel表示導(dǎo)入的模塊對象      //import方法執(zhí)行完畢返回的是一個(gè)promise對象，
                                 // 在then方法中我們可以拿到使用的模塊對象
  console.log(excel)
  excel.export_json_to_excel({
    header: ['姓名', '工資'], // 表頭 必填
    data: [
      ['劉備', 100],         //重點(diǎn)關(guān)注data的配置部分，我們發(fā)現(xiàn)它需要一個(gè)嚴(yán)格的二維數(shù)組
      ['關(guān)羽', 500]
    ], // 具體數(shù)據(jù) 必填
    filename: 'excel-list', // 文件名稱
    autoWidth: true, // 寬度是否自適應(yīng)
    bookType: 'xlsx' // 生成的文件類型
  })
})

Excel導(dǎo)出參數(shù)說明

注意：到這里為止，其實(shí)已經(jīng)完成了簡單的導(dǎo)出效果，用的是自己寫的假數(shù)據(jù)。實(shí)際項(xiàng)目中肯定是拿的后臺(tái)返回的數(shù)據(jù)，并且要對格式做修改，達(dá)到我們想要的效果（真測試了，上面的步驟跟著做就可完成。） 效果如下：

3.對后臺(tái)數(shù)據(jù)進(jìn)行處理，完成想要的效果

比如說后臺(tái)返回的表頭是英文需要轉(zhuǎn)化成中文，然后格式不是插件要的格式。

后臺(tái)返回?cái)?shù)據(jù)：

需要將key轉(zhuǎn)成中文，將value抓換成數(shù)組。

3.1  準(zhǔn)備一個(gè)數(shù)據(jù)處理函數(shù)（最后會(huì)在回調(diào)里面使用）

3.2  先處理表頭，定義一個(gè)對象，目的是待會(huì)將表頭的英文轉(zhuǎn)成中文

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

3.3  定義表頭

header = [待會(huì)將英文的表頭轉(zhuǎn)成中文的，是個(gè)數(shù)組的形式]  

如下代碼所示效果：

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

3.4  要處理后臺(tái)返回?cái)?shù)據(jù)

后臺(tái)返回?cái)?shù)組，定義one是第一個(gè)數(shù)據(jù)，目的是以第一個(gè)數(shù)據(jù)為樣本設(shè)置表頭，如果第一條數(shù)據(jù)是false的話，說明后臺(tái)啥也沒返回，那就全劇終。

如下代碼所示效果：

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

3.5   表頭處理邏輯

 01   `Object.keys(one) `   這個(gè)是遍歷對象取出key組成一個(gè)數(shù)組。

 02    ` map`     方法遍歷對每一個(gè)項(xiàng)進(jìn)行做事返回一個(gè)數(shù)組

 03     `return map[key] `   可以看做 map.id = '編號'（便于理解）；map方法不停的對map對象做事而map[key]其實(shí)就是值，如 ‘編號'、‘部門'… 然后組成一個(gè)數(shù)組 如：['姓名', '工資']

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

3.6 表格data處理邏輯

目標(biāo)：后臺(tái)返回正式員工和非正式員工用1和2表示，我們需要將數(shù)字轉(zhuǎn)成文字，并且需要讓他們變成數(shù)組的格式。

01-首先后臺(tái)返回的Obj['formOfEmployment']是數(shù)字1 , 2   我們要他們變成---> '正式'， '非正式'

02-obj['formOfEmployment'] = hireTypEnmu[key] 這段代碼意思是將漢字設(shè)置給左邊的數(shù)字，實(shí)現(xiàn)替換。我們分別看左右代表什么。

03- obj['formOfEmployment'] 此時(shí)是數(shù)字

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

05-hireTypEnmu[key]  --key是數(shù)字--所以他是value是漢字

如下代碼所示效果：

// data把list中每一個(gè)對象轉(zhuǎn)成 對應(yīng)的value數(shù)組
 // 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 函數(shù)返回

將處理好的數(shù)據(jù)返回

return { header, data }

 3.8 最終完成

這個(gè)時(shí)候，將這個(gè)函數(shù)拿到回調(diào)函數(shù)里面，header和data的數(shù)據(jù)之前已經(jīng)有了。

完成代碼如下：

hExport() {
      import('@/vendor/Export2Excel').then(async excel => {
        // 發(fā)ajax請求，獲取數(shù)據(jù)
        const res = await getEmployee(this.page, this.size)
        const list = res.data.rows
        console.log('從后端獲取的數(shù)據(jù)', list)
 
        const { header, data } = this.formatData(list)
        // excel表示導(dǎo)入的模塊對象
        console.log(header, data)
        excel.export_json_to_excel({
          // header: ['姓名', '工資'], // 表頭 必填
          header: header, // 表頭 必填
          data: data,
          filename: 'excel-list', // 文件名稱
          autoWidth: true, // 寬度是否自適應(yīng)
          bookType: 'xlsx' // 生成的文件類型
        })
      })
    },

總結(jié)：

以上代碼經(jīng)過測試，可以直接使用達(dá)成效果。

附：vue-element-admin碼云拉取，這個(gè)版本是二次開發(fā)功能多的那款

# git clone https://github.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  # 啟動(dòng)開發(fā)調(diào)試模式  查看package.json文件的scripts可知曉啟動(dòng)命令

到此這篇關(guān)于Vue導(dǎo)出Excel功能的文章就介紹到這了,更多相關(guān)Vue導(dǎo)出Excel功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論