目標
在前面員工的添加是一個一個進行的，如果一次性添加多個員工信息，這時候就會很繁瑣
因此需要我們開發(fā)一個批量導入的功能，將用戶的信息存儲到 excel 中然后進行批量導入
實現方式
1. 分析 vue-element-admin 中的導入方案
在vue-element-admin中，大佬已經封裝好了Excel的導入導出方案，我們需要引入借鑒,拷貝 vue-element-admin 中提供的 excel 導入功能組件到自己項目中
講解
導入相關的代碼文件有兩個：
-
使用組件：
src/views/excel/upload-excel.vue -
定義組件：
src/components/UploadExcel/index.vue// 注冊全局組件- 最新版的xlsx包, 導出的方式改變了, 所以我們要修改UploadExcel組件代碼
// import XLSX from 'xlsx'
// 上面改成下面這樣, 按需引入所有然后形成一個對象保存到XLSX變量上
import * as XLSX from 'xlsx'
-
Excel 的導入導出都是依賴于js-xlsx來實現的，
-
在
js-xlsx的基礎上又封裝了Export2Excel.js來方便導出數據 -
由于
Export2Excel不僅依賴js-xlsx還依賴file-saver和script-loader，因此我們需要提前安裝- file-saver 用戶在客戶端保存文件的
- script-loader 用于在前端執(zhí)行一次js腳本文件的
npm install xlsx file-saver -S
npm install script-loader -S -D
tips:-S和-D (默認就是–save不寫即可, -S -D(是–save-dev)
2. Excel導入
目標
數據格式轉換：將 excel 解析好的數據經過處理后，轉成可以傳給接口調用的數據
分析
調用接口進行excel上傳的重點其實是數據的處理
按照接口的要求，把 excel 表格中經過插件處理好的數據處理成后端接口要求的格式
實現
按接口要求，處理excel導入的數據。處理內容包含：
- 字段中文轉英文。excel中讀入的是
姓名,而后端需要的是username - 日期處理。從excel中讀入的時間是一個 number 值，而后端需要的是標準日期
代碼（邏輯很重要，多寫幾遍）
methods: {
// 將表格中的數據進行格式化
transExcel(results) {
const userRelations = {
'入職日期': 'timeOfEntry',
'手機號': 'mobile',
'姓名': 'username',
'轉正日期': 'correctionTime',
'工號': 'workNumber',
'部門': 'departmentName',
'聘用形式': 'formOfEmployment'
}
return results.map(item => {
const obj = {}
// 1. 取出這個對象所有的屬性名： ['姓名'， ‘手機號’]
// 2. 遍歷這個數組，通過 中文名去 userRelations 找對應英文名， 保存值
const contentKeys = Object.keys(item)
contentKeys.forEach(key => {
// 找到對應的英文名
const transKey = userRelations[key]
// 如果格式化的是時間，需要進行轉換
if (transKey === 'timeOfEntry' || transKey === 'correctionTime') {
// 表格的天數->轉成日期對象
const transDate = new Date(formatExcelDate(item[key]))
// 再把日期對象轉成->'年-月-日'保存到對象屬性里給后臺
obj[transKey] = parseTime(transDate, '{yyyy}-{mm}-{dd}')
} else {
obj[transKey] = item[key]
}
})
return obj
})
},
// 導入成功以后的回調函數
handleSuccess({ results, header }) {
const arr = this.transExcel(results)
console.log('轉換之后的格式是', arr)
}
}
上面用到的日期處理函數在 utils/index.js 中定義如下
// 把excel文件中的日期格式的內容轉回成標準時間
export function formatExcelDate(numb, format = '/') {
const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000)
time.setYear(time.getFullYear())
const year = time.getFullYear() + ''
const month = time.getMonth() + 1 + ''
const date = time.getDate() + ''
if (format && format.length === 1) {
return year + format + month + format + date
}
return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}
小結 表格讀出中文key對象, 如何轉換英文key的對象的?
- 準備一個中文key和英文key映射關系的對象, 然后遍歷數據里所有中文key拿出來, 換取英文key
- 再準備一個新的對象, 組織英文key和value值
調用接口
// 導入成功以后的回調函數
async handleSuccess({ results, header }) {
const arr = this.transExcel(results)
const res = await importEmployeeAPI(arr).catch(err => err)
if (!res.success) return this.$message.error(res.message)
this.$router.back()
this.$message.success('操作成功')
}
3. Excel導出
分析
- 把vue-element-admin 中的導出功能，遷移本項目
- 使用靜態(tài)數據實現基礎的導出功能（先不使用從接口獲取的數據）
給導出按鈕添加點擊事件
<el-button type="success" size="small" @click="downloadExcel">導出excel</el-button>
// 導出excel按鈕->點擊事件
downloadExcel() {
import('@/vendor/Export2Excel').then(excel => {
// excel表示導入的模塊對象
excel.export_json_to_excel({
header: ['姓名', '工資'], // 表頭 必填
data: [
['劉備', 100],
['關羽', 500]
], // 具體數據 必填
filename: 'excel-list', // 文件名稱
autoWidth: true, // 寬度是否自適應
bookType: 'xlsx' // 生成的文件類型
})
})
}
以上代碼表示:
- 當我們正式點擊
導出按鈕之后，才去加載 vendor 文件夾中的Export2Excel模塊 - import 方法執(zhí)行完畢返回的是一個 promise 對象，在then方法中我們可以拿到使用的模塊對象
- 重點關注 data 的配置部分，我們發(fā)現它需要一個嚴格的二維數組
Excel導出參數說明：
| 參數 | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| header | 導出數據的表頭 | Array | / | [] |
| data | 導出的具體數據 | Array | / | [[]] |
| filename | 導出文件名 | String | / | excel-list |
| autoWidth | 單元格是否要自適應寬度 | Boolean | true / false | true |
| bookType | 導出文件類型 | String | xlsx, csv, txt, more | xlsx |
Excel導出嘗試實現
分析：
- 從后臺重新獲取數據（這樣才能確保是最新的）
- 對數據的格式進行轉換（后端給的數據字段名都是英文的），以用來做導出
核心在于把后端接口返回的數據轉成 Export2Excel 這個插件需要的格式
準備表頭header數據
因為接口中返回的數據中的key是英文，而我們期望導出的表頭是中文，所以提前準備中文和英文的映射關系
const map = {
'id': '編號',
'password': '密碼',
'mobile': '手機號',
'username': '姓名',
'timeOfEntry': '入職日期',
'formOfEmployment': '聘用形式',
'correctionTime': '轉正日期',
'workNumber': '工號',
'departmentName': '部門',
'staffPhoto': '頭像地址'
}
具體的表格數據我們需要通過接口從后端獲取回來，難點在于如何把后端返回的數據處理成
Export2Excel插件需求的二維數組格式。
示例
const dataArr = [
["13600000001", "呂勇銳", "1992-08-04", "正式", "2020-01-01", "0001", "總裁辦"]
["13600000002", "袁永安", "1993-08-04", "正式", "2020-01-01", "0002", "總裁辦"]
]
最終的代碼文章來源：http://www.zghlxwxcb.cn/news/detail-413436.html
methods: {
// 處理數據的方法
transData(rows) {
// 寫代碼
const map = {
'id': '編號',
'password': '密碼',
'mobile': '手機號',
'username': '姓名',
'timeOfEntry': '入職日期',
'formOfEmployment': '聘用形式',
'correctionTime': '轉正日期',
'workNumber': '工號',
'departmentName': '部門',
'staffPhoto': '頭像地址'
}
const headerKeys = Object.keys(rows[0])
const header = headerKeys.map(item => {
return map[item]
})
const data = rows.map(obj => {
return Object.values(obj)
})
return { header, data }
}
// 導出 Excel
async downloadExcel() {
const res = await getEmployeeList()
// 調用上面定義的方法，處理返回的數據
const excelObj = this.transData(res.data.rows)
import('@/vendor/Export2Excel').then(excel => {
// excel表示導入的模塊對象
excel.export_json_to_excel({
header: excelObj.header, // 表頭 必填
data: excelObj.data, // 具體數據 必填
filename: '員工列表', // 文件名稱
autoWidth: true, // 寬度是否自適應
bookType: 'xlsx' // 生成的文件類型
})
})
},
}
優(yōu)化處理方法：數據順序對應文章來源地址http://www.zghlxwxcb.cn/news/detail-413436.html
transData(rows) {
// 考慮順序 (頁面上列保持一致順序)
// 4.0 準備一個列表頭中文數組 (8個)
const headerArr = ['序號', '姓名', '頭像', '手機號', '工號', '聘用形式', '部門', '入職時間']
// 4.1 數據key的映射關系(思路: 遍歷上邊數組里按照順序, 取出中文的名字, 但是對應數組值的數組, 要從英文key對象中取出value值, 我要用中文key換到英文key然后去取到值)
const myObj = {
// 序號可以等遍歷的時候直接用索引值, 而不是來自于英文對象里
'姓名': 'username',
'頭像': 'staffPhoto',
'手機號': 'mobile',
'工號': 'workNumber',
'聘用形式': 'formOfEmployment',
'部門': 'departmentName',
'入職時間': 'timeOfEntry'
}
// 4.2 按照順序, 形成值的數組 (明確目標->想要數據結構->讀代碼(每個變量意思)讀2-3遍->仿寫3-5遍)
const resultArr = rows.map((item, index) => {
const valueArr = [] // 值小數組
headerArr.forEach(zhKey => {
if (zhKey === '序號') {
valueArr.push(index + 1)
} else {
const enKey = myObj[zhKey]
valueArr.push(item[enKey])
}
})
return valueArr
})
return { header: headerArr, data: resultArr }
}
到了這里，關于Vue中如何實現Excel導入導出的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
