在Vue中導入并讀取Excel數(shù)據(jù)的操作步驟
更新時間：2023年08月01日 09:34:45 作者：瓜皮倫
在工作中遇到需要前端上傳excel文件獲取到相應數(shù)據(jù)處理之后傳給后端并且展示上傳文件的數(shù)據(jù),所以本文就來給大家介紹一下Vue中導入并讀取Excel數(shù)據(jù)的操作步驟,需要的朋友可以參考下
一、引入依賴
npm install -S file-saver xlsx npm install -D script-loader npm install xlsx
二、在main.js中引入
import XLSX from 'xlsx'
三、創(chuàng)建vue文件
<div>
<el-upload
class="upload-demo"
action=""
:on-change="handleChange"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:limit="limitUpload"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
:auto-upload="false">
<!-- 只 能 上 傳 xlsx / xls 文 件 -->
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>
<!-- 數(shù)據(jù)展示 -->
<el-main>
<el-table :data="da">
<el-table-column prop="code" label="編號">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column prop="pro" label="省份">
</el-table-column>
<el-table-column prop="cit" label="城市">
</el-table-column>
<el-table-column prop="dis" label="區(qū)縣">
</el-table-column>
</el-table>
</el-main>
</div>四、核心方法
handleChange(file, fileList){
this.fileTemp = file.raw;
if(this.fileTemp){
if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
|| (this.fileTemp.type == 'application/vnd.ms-excel')){
this.handleExcel(this.fileTemp);
} else {
this.$message({
type:'warning',
message:'文件格式錯誤，請刪除后重新上傳！'
})
}
} else {
this.$message({
type:'warning',
message:'請上文件！'
})
}
},
handleExcel(fileTemp) {
let _this = this;
this.file = fileTemp;
var rABS = false; //是否將文件讀取為二進制字符串
var f = this.file;
var reader = new FileReader();
FileReader.prototype.readAsBinaryString = function(f) {
var binary = "";
var rABS = false; //是否將文件讀取為二進制字符串
var wb; //讀取完成的數(shù)據(jù)
var outdata;
var reader = new FileReader();
reader.onload = function(e) {
var bytes = new Uint8Array(reader.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
var XLSX = require("xlsx");
if (rABS) {
wb = XLSX.read(btoa(fixdata(binary)), {
//手動轉化
type: "base64"
});
} else {
wb = XLSX.read(binary, {
type: "binary"
});
}
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的東西
console.log('未處理的原始數(shù)據(jù)如下：');
console.log(outdata);
//此處可對數(shù)據(jù)進行處理
let arr = [];
outdata.map(v => {
let obj = {}
obj.code = v['code']
obj.name = v['name']
obj.pro = v['province']
obj.cit = v['city']
obj.dis = v['district']
arr.push(obj)
});
_this.da=arr;
_this.dalen=arr.length;
return arr;
};
reader.readAsArrayBuffer(f);
};
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
}結果展示
到此這篇關于在Vue中導入并讀取Excel數(shù)據(jù)的流程步驟的文章就介紹到這了,更多相關Vue導入并讀取Excel數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue CLI3搭建的項目中路徑相關問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
如何使用el-cascader組件寫下拉級聯(lián)多選及全選功能
這篇文章主要介紹了如何使用el-cascader組件寫下拉級聯(lián)多選及全選功能,因為是有全選的功能,所以不能直接使用el-cascader組件,?而是選擇使用el-select組件,?在此組件內(nèi)部使用el-cascader-panel級聯(lián)面板,感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue使用localStorage存儲數(shù)據(jù)的方法
這篇文章主要為大家詳細介紹了Vue使用localStorage存儲數(shù)據(jù)的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
Element-UI中關于table表格的那些騷操作(小結)
這篇文章主要介紹了Element-UI中關于table表格的那些騷操作(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
VUE使用vue-tree-color組件實現(xiàn)組織架構圖并可以動態(tài)更新數(shù)據(jù)的效果
本文主要介紹了如何在Vue中使用vue-tree-color組件實現(xiàn)組織架構圖,并詳細介紹了如何實現(xiàn)數(shù)據(jù)的動態(tài)加載,在動態(tài)加載數(shù)據(jù)時,要確保數(shù)據(jù)更新是在Vue的響應式系統(tǒng)能捕獲到的情況下進行的2024-10-10
el-upload http-request使用 多個文件上傳攜帶其他參數(shù)方式
這篇文章主要介紹了el-upload http-request使用 多個文件上傳攜帶其他參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章詳細介紹了Vue.js項目的基本結構和執(zhí)行流程,包括index.html、main.js、App.vue和路由配置的關系,特別強調了在index.html中設置BASE_URL和cdn的使用,以及在main.js中使用render函數(shù)來減少打包體積2025-01-01
這篇文章主要介紹了在Vue中使用Immutable.js的步驟，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue router錯誤跳轉到首頁("/")的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在vue中，并不是任何時候數(shù)據(jù)都是雙向綁定的，解決數(shù)據(jù)沒有被雙向綁定我們可以使用?vm.$set?實例方法，該方法是全局方法?Vue.set?的一個別名，這篇文章主要介紹了vue中$set用法詳細講解,需要的朋友可以參考下2022-12-12