vue導入處理Excel表格功能步驟詳解
更新時間：2022年07月10日 10:42:04 作者：Saga?Two
最近開發(fā)遇到一個點擊導入按鈕讓excel文件數(shù)據(jù)導入在表格的需求,所以下面這篇文章主要給大家介紹了關于vue導入處理Excel表格功能步驟的相關資料,需要的朋友可以參考下
1. 前言
最近遇到前端導入并處理excel表格的情況，趁此機會剛好研究一下vue導入并處理excel數(shù)據(jù)；當然自己手擼一個工具沒有那么多時間，本文只是借助現(xiàn)有的工具來做一下工具使用總結(jié)。
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"
>
添加處理邏輯
// 導入成功時執(zhí)行
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表格內(nèi)容
workbook.SheetNames.forEach(item => {
this.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
});
// 該算法僅針對表頭無合并的情況
if (this.tableData.length > 0) {
// 獲取excel中第一個表格數(shù)據(jù)tableData[0][0]，并且將表頭提取出來
for (const key in this.tableData[0][0]) {
this.tableHead.push(key);
}
}
// 重寫數(shù)據(jù)
} catch (e) {
console.log("error:" + e);
return false;
}
};
fileReader.readAsBinaryString(file[0].raw);
}
以上處理的數(shù)據(jù)我這邊用組件展示在了頁面上，效果如下圖：
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表格內(nèi)容
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中第一個表格數(shù)據(jù)tableData[0][0]，并且將表頭提取出來
for (const key in this.tableData[0][0]) {
this.tableHead.push(key);
}
}
return params;
// 重寫數(shù)據(jù)
} 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: [] // 表數(shù)據(jù)
};
},
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表格內(nèi)容
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中第一個表格數(shù)據(jù)tableData[0][0]，并且將表頭提取出來
for (const key in this.tableData[0][0]) {
this.tableHead.push(key);
}
}
return params;
// 重寫數(shù)據(jù)
} 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表格內(nèi)容
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中第一個表格數(shù)據(jù)tableData[0][0]，并且將表頭提取出來
for (const key in this.tableData[0][0]) {
this.tableHead.push(key);
}
}
return params;
// 重寫數(shù)據(jù)
} 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. 總結(jié)
較為容易踩坑的點就是xlsx這個包的導入方式，這個包處理excel表格功能時相當強大的，除了導入與數(shù)據(jù)解析，還有導出為excel等功能，在我們?nèi)粘＞W(wǎng)站開發(fā)中非常常用。其次容易踩坑的就是vue中事件的監(jiān)聽與處理方式，我們可以看到使用組件賀不使用組件區(qū)別還是比較大的，當然使用現(xiàn)有組件往往能獲得更好的效果，所以這里還是推薦大家使用方法一去實現(xiàn)這個功能。
最后本文僅對數(shù)據(jù)做簡單處理，若要處理更為復雜的表格數(shù)據(jù)，就需要研究更強大的算法，不喜勿碰，謝謝。
到此這篇關于vue導入處理Excel表格功能步驟的文章就介紹到這了,更多相關vue導入處理Excel內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于vue自定義樹狀結(jié)構圖的實現(xiàn)方法，文中通過圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
這篇文章主要為大家詳細介紹了如何利用Vue自定義實現(xiàn)一個消息通知組件,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考下2024-03-03
本篇文章主要介紹了詳解Vue 2.0封裝axios筆記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
本文將詳細介紹通過Vue使多元素進行過渡動畫,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Vue入門之a(chǎn)nimate過渡動畫效果的相關資料,需要的朋友可以參考下2018-04-04
echarts3如何清空上一次加載的series數(shù)據(jù)
這篇文章主要介紹了echarts3如何清空上一次加載的series數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實例
今天小編就為大家分享一篇vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue3+ts封裝彈窗及封裝分頁的示例代碼,本文通過定義defaultDialog .vue,結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue-cli4項目開啟eslint保存時自動格式的問題小結(jié)，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
在vue.js項目中使用vue-router，可以使用路由進行界面或路徑跳轉(zhuǎn),下面這篇文章主要給大家介紹了關于Vue3使用路由VueRouter4的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-07-07