Vue實現(xiàn)導入Excel功能步驟詳解
1.前端主導實現(xiàn)步驟
第一步,點擊頁面上的導入按鈕,讀入Excel文件
利用插件完成。
第二步,按照后端的要求對數(shù)據(jù)格式加工,轉成他們需要的格式
需要自己寫邏輯。
第三步,通過后端接口,將數(shù)據(jù)通過ajax發(fā)回去
調接口,常規(guī)操作。
簡而言之:前端讀excel文件,修改文件格式,調接口
2.實現(xiàn)讀入Excel文件
注:此步驟就可實現(xiàn)前端導入功能。如對修改格式有興趣,可以繼續(xù)看第三步。
概括:復制代碼到自己的文件夾下,下載必需的插件。
2.1 使用的是elementUI提供的vue-admin-element中的上傳方法(百度倉庫克隆方式,官網(wǎng)也有)
2.2 下載包 npm install xlsx -S (默認現(xiàn)在已經(jīng)完成2.1步驟了)
2.3 引入UploadExcel組件并注冊為全局(去找UploadExcel這個文件,復制一下,封裝組件不必多說 )
不會注冊全局組件參考下面代碼:(你樂意在main.js里頭搞也行,這里我就按可維護性高搞)
import PageTools from './PageTools'
import UploadExcel from './UploadExcel'
export default {
// 插件的初始化, 插件給你提供的全局的功能, 都可以在這里配置
install(Vue) {
// 進行組件的全局注冊
Vue.component('PageTools', PageTools) // 注冊工具欄組件
Vue.component('UploadExcel', UploadExcel) // 注冊導入excel組件
}
}
2.4 引入組件,使用組件,配置路由,設置點擊回調函數(shù)(不必多說)
2.5 測試效果
瀏覽器手動輸入你設置的路由地址,頁面跳轉過去

小結:1.最重要的就是去復制,然后下載必要插件
2.引入UploadExcel組件(作用是導入Excel文件)是必須的,但是注冊全局不是必須的,看心情
3. 導入組件,給他注冊回調函數(shù),他里面的兩個參數(shù)是必須的,可以參考人家源代碼,更易理解
4.excel導入插件本質:把excel經(jīng)過分析轉換成js能夠識別的常規(guī)數(shù)據(jù),拿到數(shù)據(jù)我們可以進行任何操作
3.對數(shù)據(jù)進行加工
注:此步驟其實考驗的是對JavaScript的運用,可惜這個對我沒難度,相信很久之后也是。
3.1 后端要求的格式:

3.2 我們要處理的內(nèi)容:
- 字段中文轉英文。excel中讀入的是
姓名,而后端需要的是username - 日期處理。從excel中讀入的時間是一個number值,而后端需要的是標準日期。
3.3 單獨封裝一個處理函數(shù):
/**
* results excel表格的內(nèi)容
// [ {'姓名':'小張', '手機號': '13712345678'}, {.....} ]
// 目標
// [ {'username':'小張', 'mobile': '13712345678'}, {.....} ]
*/
transExcel(results) {
const userRelations = {
'入職日期': 'timeOfEntry',
'手機號': 'mobile',
'姓名': 'username',
'轉正日期': 'correctionTime',
'工號': 'workNumber',
'部門': 'departmentName',
'聘用形式': 'formOfEmployment'
}
return results.map(item => {
const obj = {}
// 1. 取出這個對象所有的屬性名: ['姓名', ‘手機號']
// 2. 遍歷這個數(shù)組,通過 中文名去 userRelations 找對應英文名, 保存值
const zhKeys = Object.keys(item)
zhKeys.forEach(zhKey => {
const enKey = userRelations[zhKey]
// 如果是時間格式,就要做轉換
if (enKey === 'correctionTime' || enKey === 'timeOfEntry') {
obj[enKey] = new Date(formatExcelDate(item[zhKey]))
} else {
obj[enKey] = item[zhKey]
}
})
return obj
})
}
handleSuccess({ results, header }) {
console.log('從當前excel文件中讀出的內(nèi)容是', results)
// results: [{入職日期: 44502, 姓名:xxxx}]
// 目標:
// results: [{timeOfEntry: 44502, username:xxxx}]
// 處理從excel中讀入的格式
const arr = this.transExcel(results)
console.log('轉換之后的格式是', arr)
})
3.4 日期處理函數(shù):
// 把excel文件中的日期格式的內(nèi)容轉回成標準時間
// https://blog.csdn.net/qq_15054679/article/details/107712966
export function formatExcelDate(numb, format = '/') {
const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 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)
}
4.調接口,發(fā)請求,在頁面中使用
import { importEmployee } from '@/api/employees'
export default {
name: 'Import',
methods: {
async handleSuccess({ results, header }) {
try {
console.log('從當前excel文件中讀出的內(nèi)容是', results)
// results: [{入職日期: 44502, 姓名:xxxx}]
// 目標:
// results: [{timeOfEntry: 44502, username:xxxx}]
const arr = this.transExcel(results)
console.log('轉換之后的格式是', arr)
// 調用上傳的接口,
const rs = await importEmployee(arr)
console.log('調用上傳的接口', rs)
// 上傳成功之后,回去剛才的頁面
this.$router.back()
this.$message.success('操作成功')
} catch (err) {
this.$message.error(err.message)
}
}
}
5 總結:
導入的功能和導出差不多,難點在于轉換數(shù)據(jù)格式,本篇文章沒有過多介紹,但在另一篇導出文章中詳細說明了,有興趣的可以去看看 點我跳轉至導出功能實現(xiàn)
到此這篇關于Vue實現(xiàn)導入Excel功能的文章就介紹到這了,更多相關vue導入Excel內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue3動態(tài)路由(響應式帶參數(shù)的路由)變更頁面不刷新的問題解決辦法
問題來源是因為我的開源項目Maple-Boot項目的網(wǎng)站前端,因為項目主打的內(nèi)容發(fā)布展示,所以其中的內(nèi)容列表頁會根據(jù)不同的菜單進行渲染不同的路由,本文降介紹Vue3動態(tài)路由變更頁面不刷新的問題解決辦法,需要的朋友可以參考下2024-07-07
vue.js 解決v-model讓select默認選中不生效的問題
這篇文章主要介紹了vue.js 解決v-model讓select默認選中不生效的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue3訪問頁面時自動獲取數(shù)據(jù)的方法實現(xiàn)
本文介紹了在Vue3中如何利用生命周期鉤子函數(shù)和定時器實現(xiàn)訪問頁面時自動獲取數(shù)據(jù)的方法,這種方法適用于需要在頁面加載時即時更新數(shù)據(jù)顯示的場景,感興趣的可以了解一下2024-11-11
vue+elementUI用戶修改密碼的前端驗證規(guī)則
用戶登錄后修改密碼,密碼需要一定的驗證規(guī)則,這篇文章主要介紹了vue+elementUI用戶修改密碼的前端驗證,需要的朋友可以參考下2024-03-03

