1.效果展示
上傳數(shù)據(jù)前
?上傳數(shù)據(jù)后
或者
?
2.下載
npm install xlsx@0.17.0如果一直報(bào)關(guān)于xlsx的read的錯(cuò)誤，這里是因?yàn)閤lsx的0.18.0版本已經(jīng)沒(méi)有read屬性了，所以最好是使用0.18.0版本以下的xlsx。
3.js文件
excel.js文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-634357.html
import { stringify } from "json5";
// 按照二進(jìn)制讀取文件
export function readFile(file) {
return new Promise((resolve) => {
let reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = (e) => {
resolve(e.target.result);
};
});
}
// 字段對(duì)應(yīng)表
export let character = {
staffName: {
text: "員工姓名",
type: "string",
},
sex: {
text: "性別",
type: "string",
},
idNumber: {
text: "身份證號(hào)",
type: "string",
},
staffEmail: {
text: "員工郵箱",
type: "string",
},
phone: {
text: "電話(huà)號(hào)碼",
type: "string",
},
jobPreference: {
text: "工作偏好",
type: "string",
},
timePreference: {
text: "時(shí)間偏好",
type: "string",
},
datePreference: {
text: "時(shí)間段偏好",
type: "string",
}
};
// 時(shí)間字符串格式化
export function formatTime(str, tpl) {
let arr = str.match(/\d+/g).map((item) => {
return item.length < 2 ? "0" + item : item;
});
tpl = tpl || "{0}年{1}月{2}日 {3}時(shí){4}分{5}秒";
return tpl.replace(/\{(\d+)\}/g, (_, group) => {
return arr[group] || "00";
});
}
utils.js 實(shí)現(xiàn)加載文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-634357.html
// 設(shè)置異步延遲間隔
export function delay(interval = 0) {
return new Promise((resolve) => {
let timer = setTimeout((_) => {
clearTimeout(timer);
resolve();
}, interval);
});
}4 .界面處理
<template>
<el-upload
ref="upload"
class="upload-demo"
action
accept=".xlsx,.xls"
:show-file-list="false"
:on-exceed="handleExceed"
:auto-upload="false"
:on-change="handle"
>
<template #trigger>
<el-button type="primary">選擇文件</el-button>
</template>
</el-upload>
<el-table :data="employeeData" border style="width: 100%">
<el-table-column prop="staffName" label="姓名" width="100px" />
<el-table-column prop="sex" label="性別" width="80px" />
<el-table-column prop="idNumber" label="身份證號(hào)" width="200px" />
<el-table-column prop="phone" label="電話(huà)號(hào)碼" width="150px" />
<el-table-column prop="staffEmail" label="郵箱" width="200px" />
<el-table-column prop="jobPreference" label="工作偏好" />
<el-table-column prop="timePreference" label="時(shí)間偏好" />
<el-table-column prop="datePreference" label="時(shí)間段偏好" />
<el-table-column label="操作">
<el-button>編輯</el-button>
<el-button type="danger">刪除</el-button>
</el-table-column>
</el-table>
</template>
<script>
//excel文件的處理
import { character, readFile } from "@/assets/js/excel";
//異步消息處理
import { delay } from "@/assets/js/utils";
//excel文件數(shù)據(jù)解析
import XLSX from "xlsx";
import { ElLoading } from 'element-plus'
export default {
data() {
return {
employeeData: [],
};
},
component: {},
created() {
},
methods: {
//采集excel數(shù)據(jù)
async handle(ev) {
//這個(gè)是上傳的文件
let file = ev.raw;
// console.log(file, "file");
//沒(méi)有文件
if (!file) return;
//解析和上傳到后端的時(shí)候進(jìn)行l(wèi)oading加載顯示
let loadingInstance = ElLoading.service({
text: "請(qǐng)稍等一下，數(shù)據(jù)正在處理中"
});
await delay(100);//延遲
//讀取file中的數(shù)據(jù)
//把文件解析成二進(jìn)制數(shù)據(jù)，把二級(jí)制數(shù)據(jù)變成excel表格式的數(shù)據(jù)
let data = await readFile(file);
let workbook = XLSX.read(data, { type: "binary" });
//拿到第一個(gè)sheet表的數(shù)據(jù)，把第一個(gè)表格的數(shù)據(jù)轉(zhuǎn)換成JSON數(shù)據(jù)
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
data = XLSX.utils.sheet_to_json(worksheet);
//把讀取出來(lái)的數(shù)據(jù)變成最后可以傳遞給服務(wù)器的數(shù)據(jù)
let employees = [];
data.forEach((item) => {
let obj = {};
for (let key in character) {
if (!character.hasOwnProperty(key)) break;
let v = character[key];
const text = v.text;
const type = v.type;
v = item[text] || "";
//對(duì)數(shù)據(jù)類(lèi)型的處理
type === "string" ? (v = String(v)) : null;
type === "number" ? (v = Number(v)) : null;
obj[key] = v;
}
employees.push(obj);
});
console.log(employees, "最后傳入后端的excel數(shù)據(jù)");
this.employeeData = employees;
loadingInstance.close();
},
},
};
</script>到了這里，關(guān)于vue實(shí)現(xiàn)excel文件的導(dǎo)入和讀取的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
