?1.終端執(zhí)行命令
npm i xlsx -s 2.script中導(dǎo)入
import FileSaver from "file-saver";
import * as XLSX from "xlsx"; 3.單表頭效果圖
4.html代碼：
<div>
<el-upload
action="/上傳文件的接口"
:on-change="onChange"
:auto-upload="false"
:show-file-list="false"
accept=".xls, .xlsx"
ref="upload"
:multiple="true">
<el-button
type="warning"
icon="el-icon-folder-add">
導(dǎo)入
</el-button>
</el-upload>
<el-button
@click="exportClick"
type="primary"
icon="el-icon-folder-opened"
class="export">
導(dǎo)出
</el-button>
</div>
<div class="table">
<el-table
:data="tableData"
border
style="width: 100%"
id="mainTable">
<el-table-column
v-for="item in tableHeader"
:key="item.id"
:prop="item.prop"
:label="item.label"
align="center"
width="180">
</el-table-column>
<el-table-column
label="操作"
align="center"
min-width="200px"
fixed="right">
<template slot-scope="scope">
<span
@click="edit(scope.row.id)"
class="inspector-operate">
修改
</span>
<span
@click="dele(scope.row.id)"
class="inspector-operate">
刪除
</span>
<span
@click="see(scope.row.id)"
class="inspector-operate">
查看
</span>
</template>
</el-table-column>
</el-table>
</div>5.js代碼
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
export default {
data() {
return {
// 表格數(shù)據(jù)
tableData: [],
// 表頭
tableHeader: [
{
id: 1,
// 中文名
label: "公司",
// 對應(yīng)數(shù)據(jù)屬性
prop: "company",
},
{
id: 2,
label: "姓名",
prop: "name",
},
{
id: 3,
label: "所在部門",
prop: "department",
},
//....
],
}
},
methods: {
//導(dǎo)入
onChange(file, fileList) {
this.readExcel(file); // 調(diào)用讀取數(shù)據(jù)的方法
},
// 讀取數(shù)據(jù)
readExcel(file) {
let that = this;
if (!file) {
//如果沒有文件
return false;
} else if (!/.(xls|xlsx)$/.test(file.name.toLowerCase())) {
this.$message.error("上傳格式不正確，請上傳xls或者xlsx格式");
return false;
}
const fileReader = new FileReader();
fileReader.onload = async (ev) => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: "binary",
});
if (workbook.SheetNames.length >= 1) {
this.$message({
message: "導(dǎo)入數(shù)據(jù)表格成功",
showClose: true,
type: "success",
});
}
const wsname = workbook.SheetNames[0]; //導(dǎo)入excel的第一張表
// 導(dǎo)入的信息
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格內(nèi)容
let params = [];
//如果一行表頭，則i從0開始，如果是兩行則從1開始以此類推
for (var i = 0; i < ws.length; i++) {
let sheetData = {
// 鍵名為綁定 el 表格的關(guān)鍵字，值則是 ws[i][對應(yīng)表頭名]
company: ws[i]["公司"],
name: ws[i]["姓名"],
department: ws[i]["所在部門"],
nowInspection: ws[i]["現(xiàn)任紀(jì)檢職務(wù)"],
departmentPost: ws[i]["所在部門崗位"],
postGradeSystem: ws[i]["崗位等級體系"],
//....
};
params.push(sheetData)
}
//數(shù)組對象傳值 一次添加多條數(shù)據(jù)的新增接口 請求新增接口
let res = await InspectorSaveAll(params)
if (res.status == 200) {
//請求分頁接口刷新數(shù)據(jù)
}
this.$refs.upload.value = "";
} catch (e) {
return false;
}
};
// 如果為原生 input 則應(yīng)是 files[0]
fileReader.readAsBinaryString(file.raw);
},
//導(dǎo)出
exportClick(test) {
//第一個參數(shù)是導(dǎo)后文件名，第二個table元素的id
this.exportExcel(test, "mainTable");
},
//轉(zhuǎn)換數(shù)據(jù)
exportExcel(filename, tableId) {
var xlsxParam = { raw: true }; // 導(dǎo)出的內(nèi)容只做解析，不進行格式轉(zhuǎn)換
var table = document.querySelector("#" + tableId).cloneNode(true);
table.removeChild(table.querySelector(".el-table__fixed-right"));
var wb = XLSX.utils.table_to_book(table, xlsxParam);
/* 獲取二進制字符進行輸出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
filename + ".xlsx"
);
} catch (e) {
if (typeof console !== "undefined") {
console.log(e, wbout);
}
}
return wbout;
},
}6.多級表頭效果圖
文章來源：http://www.zghlxwxcb.cn/news/detail-765418.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-765418.html
7.多級表頭的html代碼
<div class="btn">
<el-button
@click="add"
icon="el-icon-plus"
class="color add">
新增
</el-button>
<el-upload
action="/上傳文件的接口"
:on-change="onChange"
:auto-upload="false"
:show-file-list="false"
accept=".xls, .xlsx"
ref="upload"
:multiple="true">
<el-button
type="warning"
icon="el-icon-folder-add">
導(dǎo)入
</el-button>
</el-upload>
<el-button
@click="exportClick"
type="primary"
icon="el-icon-folder-opened"
class="export">
導(dǎo)出
</el-button>
</div>
<!-- 表格 -->
<div class="table">
<el-table
:data="tableData"
border style="width: 100%"
id="mainTable">
<template v-for="item in tableHeader">
<el-table-column
v-if="item.label !== '在處理處分影響期內(nèi)'"
:prop="item.prop"
:label="item.label"
align="center"
width="180">
</el-table-column>
<template v-else>
<el-table-column
:prop="item.prop"
:label="item.label"
align="center"
width="180">
<el-table-column
v-for="item1 in item.item"
:key="item1.id"
:prop="item1.prop"
:label="item1.label"
align="center"
width="180">
</el-table-column>
</el-table-column>
</template>
</template>
<el-table-column
label="操作"
align="center"
min-width="200px"
fixed="right">
<template slot-scope="scope">
<span
@click="edit(scope.row.id)"
class="inspector-operate">
修改
</span>
<span
@click="dele(scope.row.id)"
class="inspector-operate">
刪除
</span>
<span
@click="see(scope.row.id)"
class="inspector-operate">
查看
</span>
</template>
</el-table-column>
</el-table>
</div>8.多級表頭導(dǎo)入數(shù)據(jù)格式配置與單級表頭不同，其他js部分相同
ifMyCriticize: ws[i]["是否在民主生活會或組織生活會進行自我批評"],
ifReport: ws[i]["是否按規(guī)定向上級部門報告處分決定執(zhí)行情況"],
ifAppraising: ws[i]["在處理處分影響期內(nèi)"],//第一項對應(yīng)Excel表頭的總表頭
ifPromotion: ws[i]["__EMPTY"],//__EMPTY為分內(nèi)容的第二個，__EMPTY_1為分內(nèi)容的第3個，__2為第4個以此類推，第一個不用寫
ifLengthenFormal: ws[i]["__EMPTY_1"],
otherHandleTest: ws[i]["其他對處理處分執(zhí)行不到位的情況"],
reformMeasureTest: ws[i]["對存在處理、處分執(zhí)行不到位情況的整改措施"],
reformTime: ws[i]["對存在處理、處分執(zhí)行不到位情況的整改時限"],到了這里，關(guān)于vue+element UI Excel導(dǎo)入導(dǎo)出的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
