Vue實(shí)現(xiàn)導(dǎo)入Excel功能步驟詳解
1.前端主導(dǎo)實(shí)現(xiàn)步驟
第一步,點(diǎn)擊頁(yè)面上的導(dǎo)入按鈕,讀入Excel文件
利用插件完成。
第二步,按照后端的要求對(duì)數(shù)據(jù)格式加工,轉(zhuǎn)成他們需要的格式
需要自己寫邏輯。
第三步,通過(guò)后端接口,將數(shù)據(jù)通過(guò)ajax發(fā)回去
調(diào)接口,常規(guī)操作。
簡(jiǎn)而言之:前端讀excel文件,修改文件格式,調(diào)接口
2.實(shí)現(xiàn)讀入Excel文件
注:此步驟就可實(shí)現(xiàn)前端導(dǎo)入功能。如對(duì)修改格式有興趣,可以繼續(xù)看第三步。
概括:復(fù)制代碼到自己的文件夾下,下載必需的插件。
2.1 使用的是elementUI提供的vue-admin-element中的上傳方法(百度倉(cāng)庫(kù)克隆方式,官網(wǎng)也有)
2.2 下載包 npm install xlsx -S (默認(rèn)現(xiàn)在已經(jīng)完成2.1步驟了)
2.3 引入U(xiǎn)ploadExcel組件并注冊(cè)為全局(去找UploadExcel這個(gè)文件,復(fù)制一下,封裝組件不必多說(shuō)
)
不會(huì)注冊(cè)全局組件參考下面代碼:(你樂(lè)意在main.js里頭搞也行,這里我就按可維護(hù)性高搞)
import PageTools from './PageTools' import UploadExcel from './UploadExcel' export default { // 插件的初始化, 插件給你提供的全局的功能, 都可以在這里配置 install(Vue) { // 進(jìn)行組件的全局注冊(cè) Vue.component('PageTools', PageTools) // 注冊(cè)工具欄組件 Vue.component('UploadExcel', UploadExcel) // 注冊(cè)導(dǎo)入excel組件 } }
2.4 引入組件,使用組件,配置路由,設(shè)置點(diǎn)擊回調(diào)函數(shù)(不必多說(shuō))
2.5 測(cè)試效果
瀏覽器手動(dòng)輸入你設(shè)置的路由地址,頁(yè)面跳轉(zhuǎn)過(guò)去
小結(jié):1.最重要的就是去復(fù)制,然后下載必要插件
2.引入U(xiǎn)ploadExcel組件(作用是導(dǎo)入Excel文件)是必須的,但是注冊(cè)全局不是必須的,看心情
3. 導(dǎo)入組件,給他注冊(cè)回調(diào)函數(shù),他里面的兩個(gè)參數(shù)是必須的,可以參考人家源代碼,更易理解
4.excel導(dǎo)入插件本質(zhì):把excel經(jīng)過(guò)分析轉(zhuǎn)換成js能夠識(shí)別的常規(guī)數(shù)據(jù),拿到數(shù)據(jù)我們可以進(jìn)行任何操作
3.對(duì)數(shù)據(jù)進(jìn)行加工
注:此步驟其實(shí)考驗(yàn)的是對(duì)JavaScript的運(yùn)用,可惜這個(gè)對(duì)我沒(méi)難度,相信很久之后也是。
3.1 后端要求的格式:
3.2 我們要處理的內(nèi)容:
- 字段中文轉(zhuǎn)英文。excel中讀入的是
姓名
,而后端需要的是username
- 日期處理。從excel中讀入的時(shí)間是一個(gè)number值,而后端需要的是標(biāo)準(zhǔn)日期。
3.3 單獨(dú)封裝一個(gè)處理函數(shù):
/** * results excel表格的內(nèi)容 // [ {'姓名':'小張', '手機(jī)號(hào)': '13712345678'}, {.....} ] // 目標(biāo) // [ {'username':'小張', 'mobile': '13712345678'}, {.....} ] */ transExcel(results) { const userRelations = { '入職日期': 'timeOfEntry', '手機(jī)號(hào)': 'mobile', '姓名': 'username', '轉(zhuǎn)正日期': 'correctionTime', '工號(hào)': 'workNumber', '部門': 'departmentName', '聘用形式': 'formOfEmployment' } return results.map(item => { const obj = {} // 1. 取出這個(gè)對(duì)象所有的屬性名: ['姓名', ‘手機(jī)號(hào)'] // 2. 遍歷這個(gè)數(shù)組,通過(guò) 中文名去 userRelations 找對(duì)應(yīng)英文名, 保存值 const zhKeys = Object.keys(item) zhKeys.forEach(zhKey => { const enKey = userRelations[zhKey] // 如果是時(shí)間格式,就要做轉(zhuǎn)換 if (enKey === 'correctionTime' || enKey === 'timeOfEntry') { obj[enKey] = new Date(formatExcelDate(item[zhKey])) } else { obj[enKey] = item[zhKey] } }) return obj }) } handleSuccess({ results, header }) { console.log('從當(dāng)前excel文件中讀出的內(nèi)容是', results) // results: [{入職日期: 44502, 姓名:xxxx}] // 目標(biāo): // results: [{timeOfEntry: 44502, username:xxxx}] // 處理從excel中讀入的格式 const arr = this.transExcel(results) console.log('轉(zhuǎn)換之后的格式是', arr) })
3.4 日期處理函數(shù):
// 把excel文件中的日期格式的內(nèi)容轉(zhuǎn)回成標(biāo)準(zhǔn)時(shí)間 // 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.調(diào)接口,發(fā)請(qǐng)求,在頁(yè)面中使用
import { importEmployee } from '@/api/employees' export default { name: 'Import', methods: { async handleSuccess({ results, header }) { try { console.log('從當(dāng)前excel文件中讀出的內(nèi)容是', results) // results: [{入職日期: 44502, 姓名:xxxx}] // 目標(biāo): // results: [{timeOfEntry: 44502, username:xxxx}] const arr = this.transExcel(results) console.log('轉(zhuǎn)換之后的格式是', arr) // 調(diào)用上傳的接口, const rs = await importEmployee(arr) console.log('調(diào)用上傳的接口', rs) // 上傳成功之后,回去剛才的頁(yè)面 this.$router.back() this.$message.success('操作成功') } catch (err) { this.$message.error(err.message) } } }
5 總結(jié):
導(dǎo)入的功能和導(dǎo)出差不多,難點(diǎn)在于轉(zhuǎn)換數(shù)據(jù)格式,本篇文章沒(méi)有過(guò)多介紹,但在另一篇導(dǎo)出文章中詳細(xì)說(shuō)明了,有興趣的可以去看看 點(diǎn)我跳轉(zhuǎn)至導(dǎo)出功能實(shí)現(xiàn)
到此這篇關(guān)于Vue實(shí)現(xiàn)導(dǎo)入Excel功能的文章就介紹到這了,更多相關(guān)vue導(dǎo)入Excel內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue項(xiàng)目如何根據(jù)不同運(yùn)行環(huán)境打包項(xiàng)目
這篇文章主要介紹了Vue項(xiàng)目如何根據(jù)不同運(yùn)行環(huán)境打包項(xiàng)目問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫的示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01vue實(shí)現(xiàn)樹形結(jié)構(gòu)增刪改查的示例代碼
其實(shí)很多公司都會(huì)有類似于用戶權(quán)限樹的增刪改查功能,本文主要介紹了vue實(shí)現(xiàn)樹形結(jié)構(gòu)增刪改查,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09對(duì)vuejs的v-for遍歷、v-bind動(dòng)態(tài)改變值、v-if進(jìn)行判斷的實(shí)例講解
今天小編就為大家分享一篇對(duì)vuejs的v-for遍歷、v-bind動(dòng)態(tài)改變值、v-if進(jìn)行判斷的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08Vue項(xiàng)目打包部署到iis服務(wù)器的配置方法
這篇文章主要介紹了Vue項(xiàng)目打包部署到iis服務(wù)器的配置方法,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10Vue實(shí)現(xiàn)PopupWindow組件詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)PopupWindow組件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04vue中移動(dòng)端調(diào)取本地的復(fù)制的文本方式
這篇文章主要介紹了vue中移動(dòng)端調(diào)取本地的復(fù)制的文本方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07使用vue編寫h5公眾號(hào)跳轉(zhuǎn)小程序的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用vue編寫h5公眾號(hào)跳轉(zhuǎn)小程序,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11