在上一篇文章中我們完成了對excel的導出操作（鏈接：https://blog.csdn.net/a736755244/article/details/99426520），那麼如何導入excel並讀取其中的數據呢？
一、導入並讀取Excel功能從整體上來說兩種方式，一是前端解析文件後將數據返回給後端，另一種是前端直接將Excel文檔返回後臺，由後臺進行處理。使用哪種方法需要根據具體業務需求，下面簡單介紹第一種方法：由前端解析數據
1、引入依賴
npm install -S file-saver xlsx
npm install -D script-loader
npm install xlsx
2、在main.js中引入XLSX
import XLSX from 'xlsx'
Vue.use(XLSX)
3、前面環境和依賴完成之後，我們開始創建Import.vue頁面，放一個button上傳按鈕。
各參數說明可參考官方文檔：https://www.jianshu.com/p/84b727a4b58a
<!--limit:最大上傳數，on-exceed：超過最大上傳數量時的操作 -->
<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">
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>
4、定義所需要的方法，代碼如下（爲了美觀，加入了一些提示語和提示框）
//上傳文件時處理方法
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.importfxx(this.fileTemp);
} else {
this.$message({
type:'warning',
message:'附件格式錯誤，請刪除後重新上傳！'
})
}
} else {
this.$message({
type:'warning',
message:'請上傳附件！'
})
}
},
//超出最大上傳文件數量時的處理方法
handleExceed(){
this.$message({
type:'warning',
message:'超出最大上傳文件數量的限制！'
})
return;
},
//移除文件的操作方法
handleRemove(file,fileList){
this.fileTemp = null
},
最重要的讀取excel文件的方法：
importfxx(obj) {
let _this = this;
let inputDOM = this.$refs.inputer;
// 通過DOM取文件數據
this.file = event.currentTarget.files[0];
var rABS = false; //是否將文件讀取爲二進制字符串
var f = this.file;
var reader = new FileReader();
//if (!FileReader.prototype.readAsBinaryString) {
FileReader.prototype.readAsBinaryString = function(f) {
var binary = "";
var rABS = false; //是否將文件讀取爲二進制字符串
var pt = this;
var wb; //讀取完成的數據
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]);
}
//此處引入，用於解析excel
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就是讀取的數據（不包含標題行即表頭，表頭會作爲對象的下標）
//此處可對數據進行處理
// 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);
}
}
5、獲取的數據及展示如下：
6、相關代碼已經上傳Github，地址如下：
https://github.com/736755244/Import
————————————————
版權聲明：本文爲CSDN博主「前端的小小對象」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/a736755244/article/details/99568133