Vue前端解析Excel數(shù)據(jù)方式
更新時(shí)間：2024年03月15日 08:48:34 作者：不情不愿
這篇文章主要介紹了Vue前端解析Excel數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue前端解析Excel數(shù)據(jù)
想要在前端實(shí)現(xiàn) Excel 表格數(shù)據(jù)的解析
需要安裝 xlsx 包
cnpm install xlsx
在需要使用的地方引入
import * as XLSX from 'xlsx/xlsx.mjs'
使用 Element UI 提供的上傳功能組件
對(duì)excel 表格數(shù)據(jù)進(jìn)行解析
全部代碼如下：
<template>
<div id="app">
<h2>{{message}}</h2>
<el-upload
action
accept = ".xlsx, .xls"
:auto-upload="false"
:show-file-list="false"
:on-change="handle">
<el-button type="primary">打開(kāi)excel</el-button>
</el-upload>
</div>
</template>
<script>
import * as XLSX from 'xlsx/xlsx.mjs'
export default {
name: 'App',
data(){
return {
message:' XLSX 的使用'
}
},
methods:{
readFile(file){//文件讀取
return new Promise(resolve => {
let reader = new FileReader();
reader.readAsBinaryString(file);//以二進(jìn)制的方式讀取
reader.onload = ev =>{
resolve(ev.target.result);
}
})
},
async handle(ev){
let file = ev.raw;
console.log(file)
if(!file){
console.log("文件打開(kāi)失敗")
return ;
}else{
let data = await this.readFile(file);
let workbook = XLSX.read(data,{ type: "binary"});//解析二進(jìn)制格式數(shù)據(jù)
console.log('二進(jìn)制數(shù)據(jù)的解析:')
console.log(workbook)
let worksheet = workbook.Sheets[workbook.SheetNames[0]];//獲取第一個(gè)Sheet
let result = XLSX.utils.sheet_to_json(worksheet);//json數(shù)據(jù)格式
console.log('最終解析的 json 格式數(shù)據(jù):')
console.log(result)
}
}
}
}
</script>
<style>
</style>原始表格數(shù)據(jù)：實(shí)驗(yàn)數(shù)據(jù).xls
運(yùn)行結(jié)果：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能
本次需求是做一個(gè)視頻列表，點(diǎn)擊視頻列表播放對(duì)應(yīng)視頻；同時(shí)要求實(shí)現(xiàn)斷點(diǎn)分段上傳大文件（視頻）的功能,今天通過(guò)本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能，感興趣的朋友一起看看吧2022-12-12
這篇文章主要為大家介紹了Vue的自定義事件內(nèi)容分發(fā)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
淺談vue實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)的函數(shù) Object.defineProperty
本篇文章主要介紹了淺談vue實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)的函數(shù) Object.defineProperty，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
AntV F2和vue-cli構(gòu)建移動(dòng)端可視化視圖過(guò)程詳解
這篇文章主要介紹了AntV F2和vue-cli構(gòu)建移動(dòng)端可視化視圖過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
AntV+Vue實(shí)現(xiàn)導(dǎo)出圖片功能
AntV?組織圖操作完畢以后，需要點(diǎn)擊按鈕將畫(huà)布以圖片的形式導(dǎo)出，這篇文章主要介紹了AntV結(jié)合Vue實(shí)現(xiàn)導(dǎo)出圖片功能,需要的朋友可以參考下2023-01-01
element用腳本自動(dòng)化構(gòu)建新組件的實(shí)現(xiàn)示例
本文主要介紹了element-ui的用腳本自動(dòng)化構(gòu)建新組件的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
如何利用SpringBoot與Vue3構(gòu)建前后端分離項(xiàng)目
在當(dāng)前的互聯(lián)網(wǎng)時(shí)代,前后端分離架構(gòu)已經(jīng)成為構(gòu)建應(yīng)用系統(tǒng)的主流方式,本文將詳細(xì)介紹如何利用 SpringBoot 與 Vue3 構(gòu)建一個(gè)前后端分離的項(xiàng)目,感興趣的小伙伴可以了解下2025-04-04
這篇文章給大家介紹了vue使用qrcode生成二維碼的方法,在Vue中實(shí)現(xiàn)二維碼生成需要使用第三方庫(kù)來(lái)處理生成二維碼的邏輯,常用的庫(kù)有qrcode和vue-qrcode,所以接下來(lái)小編將給大家介紹vue?qrcode生成二維碼的方法示例,需要的朋友可以參考下2024-01-01
vue中使用go()和back()兩種返回上一頁(yè)的區(qū)別說(shuō)明
這篇文章主要介紹了vue中使用go()和back()兩種返回上一頁(yè)的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
基于vue3+antDesign2+echarts?實(shí)現(xiàn)雷達(dá)圖效果
這篇文章主要介紹了基于vue3+antDesign2+echarts?實(shí)現(xiàn)雷達(dá)圖,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08