vue導入處理Excel表格功能步驟詳解
1. 前言
最近遇到前端導入並處理excel表格的情況，趁此機會剛好研究一下vue導入並處理excel數據；當然自己手擼一個工具沒有那麼多時間，本文隻是借助現有的工具來做一下工具使用總結。
2.vue導入Excel表格
vue導入Excel表格主要有兩種常用的方法，一個是借助ElementUI文件上傳進行表格導入，另一個是自帶的input做文件上傳；以下對兩個方法做詳細介紹；
2.1 使用ElementUI中的upload組件
安裝ElementUI
npm i element-ui -S
安裝Excel表格解析插件
npm i xlsx -S
導入需要用的工具包
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import { read, utils } from "xlsx"; // 註意處理方法引入方式
Vue.use(ElementUI);
引入組件
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:on-success="handleChange"
:file-list="fileList"
class="el-upload"
>
添加處理邏輯
// 導入成功時執行
handleChange(res, file, fileList) {
// 將文件放入
for (let i = 0; i < fileList.length; i++) {
if (file.name != fileList[i].name) {
this.fileList.push({
name: file.name,
url: "",
uid: file.uid
});
}
}
const files = { 0: file };
this.readExcel(files);
},
readExcel(file) {
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const workbook = read(data, { type: "binary" });
const params = [];
// 取對應表生成json表格內容
workbook.SheetNames.forEach(item => {
this.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
});
// 該算法僅針對表頭無合並的情況
if (this.tableData.length > 0) {
// 獲取excel中第一個表格數據tableData[0][0]，並且將表頭提取出來
for (const key in this.tableData[0][0]) {
this.tableHead.push(key);
}
}
// 重寫數據
} catch (e) {
console.log("error:" + e);
return false;
}
};
fileReader.readAsBinaryString(file[0].raw);
}
以上處理的數據我這邊用組件展示在瞭頁面上，效果如下圖：
2.2 使用input文件上傳
1.安裝Excel表格解析插件
npm i xlsx -S
2.導入需要用的工具包
import { read, utils } from "xlsx"; // 註意處理方法引入方式
3.使用input
<div class="flex-display">
<div class="left-box">文件上傳(input)：</div>
<input type="file" v-on:change="onChange" class="file-ipt" />
</div>
4.添加處理邏輯
基本與上面處理邏輯相同
onChange(e) {
const file = e.target.files[0];
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const workbook = read(data, { type: "binary" });
const params = [];
// 取對應表生成json表格內容
workbook.SheetNames.forEach(item => {
params.push({
name: item,
dataList: utils.sheet_to_json(workbook.Sheets[item])
});
this.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
});
// 該算法僅針對表頭無合並的情況
if (this.tableData.length > 0) {
// 獲取excel中第一個表格數據tableData[0][0]，並且將表頭提取出來
for (const key in this.tableData[0][0]) {
this.tableHead.push(key);
}
}
return params;
// 重寫數據
} catch (e) {
console.log("error:" + e);
return false;
}
};
fileReader.readAsBinaryString(file);
}
3. 總體代碼與效果
效果如下：
總的樣式以及代碼如下：
<template>
<div>
<div class="flex-display">
<div class="left-box">表格上傳(ElementUI):</div>
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:on-success="handleChange"
:file-list="fileList"
class="el-upload"
>
<el-button size="small" type="primary" class="el-btn"
>點擊上傳</el-button
>
<div slot="tip" class="el-upload-tip">
隻能上傳xlsx文件，且不超過5MB
</div>
</el-upload>
</div>
<el-table v-if="tableHead.length" :data="tableData[0]" style="width: 100%">
<el-table-column
v-for="(data, key) in tableHead"
:prop="data"
:label="data"
:key="key"
width="180"
>
</el-table-column>
</el-table>
<div class="flex-display">
<div class="left-box">文件上傳(input)：</div>
<input type="file" v-on:change="onChange" class="file-ipt" />
</div>
</div>
</template>
<script>
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import { read, utils } from "xlsx";
Vue.use(ElementUI);
export default {
data() {
return {
fileList: [], //上傳文件列表
tableHead: [], //表頭
tableData: [] // 表數據
};
},
methods: {
onChange(e) {
const file = e.target.files[0];
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const workbook = read(data, { type: "binary" });
const params = [];
// 取對應表生成json表格內容
workbook.SheetNames.forEach(item => {
params.push({
name: item,
dataList: utils.sheet_to_json(workbook.Sheets[item])
});
this.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
});
// 該算法僅針對表頭無合並的情況
if (this.tableData.length > 0) {
// 獲取excel中第一個表格數據tableData[0][0]，並且將表頭提取出來
for (const key in this.tableData[0][0]) {
this.tableHead.push(key);
}
}
return params;
// 重寫數據
} catch (e) {
console.log("error:" + e);
return false;
}
};
fileReader.readAsBinaryString(file);
},
handleChange(res, file, fileList) {
// 將文件放入
for (let i = 0; i < fileList.length; i++) {
if (file.name != fileList[i].name) {
this.fileList.push({
name: file.name,
url: "",
uid: file.uid
});
}
}
// this.fileList = fileList.slice(-3);
const files = { 0: file };
this.readExcel(files);
},
readExcel(file) {
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const workbook = read(data, { type: "binary" });
const params = [];
// 取對應表生成json表格內容
workbook.SheetNames.forEach(item => {
params.push({
name: item,
dataList: utils.sheet_to_json(workbook.Sheets[item])
});
this.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
});
// 該算法僅針對表頭無合並的情況
if (this.tableData.length > 0) {
// 獲取excel中第一個表格數據tableData[0][0]，並且將表頭提取出來
for (const key in this.tableData[0][0]) {
this.tableHead.push(key);
}
}
return params;
// 重寫數據
} catch (e) {
console.log("error:" + e);
return false;
}
};
fileReader.readAsBinaryString(file[0].raw);
}
}
};
</script>
<style lang="scss" scoped>
.upload-demo {
width: 100%;
}
.flex-display {
margin: 50px 30px;
width: 100%;
display: flex;
justify-content: flex-start;
.left-box {
margin: 20 30;
height: 36px;
line-height: 36px;
}
}
.el-upload {
margin-left: 40px;
.el-btn {
font-size: 16px;
}
.el-upload-tip {
display: inline;
font-size: 12px;
}
}
.file-ipt {
width: 200px;
height: 36px;
line-height: 36px;
button {
background-color: #409eff;
}
}
input #file-upload-button {
background-color: #409eff;
}
</style>
4. 總結
較為容易踩坑的點就是xlsx這個包的導入方式，這個包處理excel表格功能時相當強大的，除瞭導入與數據解析，還有導出為excel等功能，在我們日常網站開發中非常常用。其次容易踩坑的就是vue中事件的監聽與處理方式，我們可以看到使用組件賀不使用組件區別還是比較大的，當然使用現有組件往往能獲得更好的效果，所以這裡還是推薦大傢使用方法一去實現這個功能。
最後本文僅對數據做簡單處理，若要處理更為復雜的表格數據，就需要研究更強大的算法，不喜勿碰，謝謝。
到此這篇關於vue導入處理Excel表格功能步驟的文章就介紹到這瞭,更多相關vue導入處理Excel內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- vue導入excel文件,vue導入多個sheets的方式
- 如何利用JavaScript讀取excel文件並繪制echarts圖形
- 如何使用vue實現前端導入excel數據
- 詳解如何實現在Vue中導入Excel文件
- elementUI+Springboot實現導出excel功能的全過程