注：末尾有完整代码

效果图

Excel

1、下载依赖

xlsx是导入所需依赖
file-saver是导出所需依赖

npm install xlsx --save
npm install file-saver --save

2、组件中导入

import * as XLSX from "xlsx/xlsx.mjs";
import FileSaver from "file-saver";

3、html部分

el-upload内部分属性：

action：必填字段，这里没有填服务器地址。
:auto-upload=“false”：将文件进行截取，避免上传，配合action属性使用
:on-change=“handle”：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

el-table：el-table-column序号显示可根据需求删除

<template><div id="Excel"><!-- 上传 --><el-uploadactionaccept=".xlsx, .xls":auto-upload="false":show-file-list="false":on-change="handle"><el-button type="primary" class="imExcelBtn">导入Excel</el-button></el-upload><!-- 表格名称及导出和关闭预览的按钮 --><div class="excelName" v-if="tableKey"><div class="left"></div><div class="center">{{ excelName }}</div><div class="right"><el-button type="success" @click="exportExcel">导出为Excel</el-button><el-button type="danger" @click="closeExcel">关闭预览</el-button></div></div><!-- 表格 --><el-table:data="tableData"style="width: 100%"max-height="500":key="tableKey":header-cell-style="{background: '#d2d28e',color: '#000000',}"v-if="tableKey"id="excelTable"borderstripe><!-- 第一个el-table-column 可根据需求删除--><el-table-columnheader-align="center"align="center"type="index"label="序号"width="50"></el-table-column><el-table-columnv-for="(item, index) in tableColumn":key="index":prop="item.prop":label="item.label"width="width"></el-table-column></el-table></div>
</template>

4、data部分

data() {return {tableKey: false, //表格的key及显示与隐藏excelName: "", //excel表格名称excelHeader: [], //excel的表头tableData: [], //表格数据tableColumn: [], //表格的表头};},

5、methods内函数

// 上传文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用async handle(ev) {//改变表格key值this.tableKey = true;let file = ev.raw;this.excelName = file.name;//截取表格文件名this.excelName = this.excelName.substring(0, this.excelName.lastIndexOf("."));console.log("上传的未解析源文件", file);if (!file) {console.log("文件打开失败");return;} else {let data = await this.readFile(file);let workbook = XLSX.read(data, { type: "binary" }); //解析二进制格式数据console.log("二进制数据的解析:", workbook);let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet// 调用解析表头方法this.getHeader(worksheet);let result = XLSX.utils.sheet_to_json(worksheet); //转换为json数据格式console.log("最终解析的 json 格式数据:", result);this.tableData = result;// 调用处理表头函数this.setTable();}},

//文件读取
readFile(file) {return new Promise((resolve) => {let reader = new FileReader();reader.readAsBinaryString(file); //以二进制的方式读取reader.onload = (ev) => {resolve(ev.target.result);};});},

// 解析出表格表头getHeader(sheet) {// const XLSX = XLSX;const headers = [];const range = XLSX.utils.decode_range(sheet["!ref"]); // worksheet['!ref'] 是工作表的有效范围let C;/* 获取单元格值 start in the first row */const R = range.s.r; // 行 // C 列let i = 0;for (C = range.s.c; C <= range.e.c; ++C) {var cell =sheet[XLSX.utils.encode_cell({ c: C, r: R })]; /* 根据地址得到单元格的值find the cell in the first row */var hdr = "UNKNOWN" + C; // 如果有空表头，会替换为您想要的默认值replace with your desired default// XLSX.utils.format_cell 生成单元格文本值if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);if (hdr.indexOf("UNKNOWN") > -1) {if (!i) {hdr = "__EMPTY";} else {hdr = "__EMPTY_" + i;}i++;}headers.push(hdr);}// 保存至data中this.excelHeader = headers;return headers;},

// 设置表格中英文映射setTable() {const headers = this.excelHeader;const excellist = this.tableData;const tableTitleData = []; // 存储表格表头数据const tableMapTitle = {}; // 设置表格内容中英文对照用headers.forEach((_, i) => {tableMapTitle[_] = "prop" + i;tableTitleData.push({prop: "prop" + i,label: _,width: 100,});});console.log("表格头标题：", tableTitleData);// 映射表格内容属性名为英文const newTableData = [];excellist.forEach((_) => {const newObj = {};Object.keys(_).forEach((key) => {newObj[tableMapTitle[key]] = _[key];});newTableData.push(newObj);});console.log("表格数据：", newTableData);this.tableColumn = tableTitleData;this.tableData = newTableData;},

将表格导出为Excel的函数

== ‘fileName.xlsx’:==导出的文件名称，可自行设置

//导出表格为ExcelexportExcel() {/* generate workbook object from table */let xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换let table = document.querySelector('#excelTable').cloneNode(true)//这里是双下划线// table.removeChild(table.querySelector('.el-table__fixed')) let wb = XLSX.utils.table_to_book(table, xlsxParam)/* get binary string as output */let 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、样式部分

<style lang='less' scoped>
.excelName {display: flex;justify-content: space-between;font-size: 30px;margin-bottom: 20px;
}
.imExcelBtn {margin: 10px 0;
}
</style>

完整代码

<template><div id="Excel"><!-- 上传 --><el-uploadactionaccept=".xlsx, .xls":auto-upload="false":show-file-list="false":on-change="handle"><el-button type="primary" class="imExcelBtn">导入Excel</el-button></el-upload><!-- 表格名称及导出和关闭预览的按钮 --><div class="excelName" v-if="tableKey"><div class="left"></div><div class="center">{{ excelName }}</div><div class="right"><el-button type="success" @click="exportExcel">导出为Excel</el-button><el-button type="danger" @click="closeExcel">关闭预览</el-button></div></div><!-- 表格 --><el-table:data="tableData"style="width: 100%"max-height="500":key="tableKey":header-cell-style="{background: '#d2d28e',color: '#000000',}"v-if="tableKey"id="excelTable"borderstripe><!-- 第一个el-table-column 可根据需求删除--><el-table-columnheader-align="center"align="center"type="index"label="序号"width="50"></el-table-column><el-table-columnv-for="(item, index) in tableColumn":key="index":prop="item.prop":label="item.label"width="width"></el-table-column></el-table></div>
</template>
<script>
import * as XLSX from "xlsx/xlsx.mjs";
import FileSaver from "file-saver";
export default {name: "Excel",data() {return {tableKey: false, //表格的key及显示与隐藏excelName: "", //excel表格名称excelHeader: [], //excel的表头tableData: [], //表格数据tableColumn: [], //表格的表头};},methods: {readFile(file) {//文件读取return new Promise((resolve) => {let reader = new FileReader();reader.readAsBinaryString(file); //以二进制的方式读取reader.onload = (ev) => {resolve(ev.target.result);};});},// 上传文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用async handle(ev) {//改变表格key值this.tableKey = true;let file = ev.raw;this.excelName = file.name;//截取表格文件名this.excelName = this.excelName.substring(0,this.excelName.lastIndexOf("."));console.log("上传的未解析源文件", file);if (!file) {console.log("文件打开失败");return;} else {let data = await this.readFile(file);let workbook = XLSX.read(data, { type: "binary" }); //解析二进制格式数据console.log("二进制数据的解析:", workbook);let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet// 调用解析表头方法this.getHeader(worksheet);let result = XLSX.utils.sheet_to_json(worksheet); //转换为json数据格式console.log("最终解析的 json 格式数据:", result);this.tableData = result;// 调用处理表头函数this.setTable();}},// 解析出表格表头getHeader(sheet) {// const XLSX = XLSX;const headers = [];const range = XLSX.utils.decode_range(sheet["!ref"]); // worksheet['!ref'] 是工作表的有效范围let C;/* 获取单元格值 start in the first row */const R = range.s.r; // 行 // C 列let i = 0;for (C = range.s.c; C <= range.e.c; ++C) {var cell =sheet[XLSX.utils.encode_cell({ c: C, r: R })]; /* 根据地址得到单元格的值find the cell in the first row */var hdr = "UNKNOWN" + C; // 如果有空表头，会替换为您想要的默认值replace with your desired default// XLSX.utils.format_cell 生成单元格文本值if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);if (hdr.indexOf("UNKNOWN") > -1) {if (!i) {hdr = "__EMPTY";} else {hdr = "__EMPTY_" + i;}i++;}headers.push(hdr);}// 保存至data中this.excelHeader = headers;return headers;},// 设置表格中英文映射setTable() {const headers = this.excelHeader;const excellist = this.tableData;const tableTitleData = []; // 存储表格表头数据const tableMapTitle = {}; // 设置表格内容中英文对照用headers.forEach((_, i) => {tableMapTitle[_] = "prop" + i;tableTitleData.push({prop: "prop" + i,label: _,width: 100,});});console.log("表格头标题：", tableTitleData);// 映射表格内容属性名为英文const newTableData = [];excellist.forEach((_) => {const newObj = {};Object.keys(_).forEach((key) => {newObj[tableMapTitle[key]] = _[key];});newTableData.push(newObj);});console.log("表格数据：", newTableData);this.tableColumn = tableTitleData;this.tableData = newTableData;},// 关闭表格预览closeExcel() {this.tableKey = false;//表格数据置空this.tableData = [];this.tableColumn = [];},//导出表格为ExcelexportExcel() {/* generate workbook object from table */let xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换let table = document.querySelector('#excelTable').cloneNode(true)//这里是双下划线// table.removeChild(table.querySelector('.el-table__fixed')) let wb = XLSX.utils.table_to_book(table, xlsxParam)/* get binary string as output */let 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},},
};
</script><style lang='less' scoped>
.excelName {display: flex;justify-content: space-between;font-size: 30px;margin-bottom: 20px;
}
.imExcelBtn {margin: 10px 0;
}
</style>

导入部分参考文章：

Vue 前端解析 Excel 数据
从0-1超详细教你实现前端读取excel表格并渲染到界面

导出部分参考文章：

vue导出Excel——elementUI表格导出功能

【vue + Excel表格导入与导出】导入Excel并展示在el-table表格中，表格导出为Excel文件相关推荐

表格锁定头和列中间内容展示
表格锁定头和列中间内容展示 jQuery前端table插件,表格顶部头和左右两边列锁定,通过上下和左右滚动展示表格内容,支持内容修改功能.无法兼容所有浏览器,在IE8(H5的效果无效).需要layui ...
oracle 导出导入exl,关于oracle导出excel和excel导入oracle的经验总结【转】
一.oracle导出excel 方法一:最简单的方法---用工具plsql dev 执行File =>new Report Window .在sql标签中写入需要的sql,点击执行或按快捷键F8 ...
python word中表格字体设置_利用Python-docx 读写 Word 文档中的正文、表格、段落、字体样式等...
前言: 前两篇博客介绍了 Python 的 docx 模块对 Word 文档的写操作,这篇博客将介绍如何用 docx 模块读取已有 Word 文档中的信息. 本篇博客主要内容有: 1.获取文档的章节信 ...
latex 中表格怎么指定编号_在医学论文中，应用表格怎么用才是正确的？
表格是记录数据或事物分类的一种有效表达方法,具有清晰准确的特点,是医学论文的重要组成部分.有些作者在制作时,常常出现表格不规范的情况.为了避免出现这种情况,建议在医学论文中应用表格时,有必要先了解一下 ...
Word中表格调整参数预设值有关的细节
Word中制作表格后可能会存在表格行距不一致.字体字号的差异,这个时候如何调整表格内的细节,让Word中的表格最后呈现的大气美观,就成为了一个重要的问题. Word中调整表格应包含哪些内容: 选择表格 ...
vue中使用Luckysheet实现Excel的导入、在线编辑、导出等功能
一.准备阶段 1.在pubilic文件夹下的index.html文件中的head标签中引入Luckysheet的cdn文件 <link rel='stylesheet' href='https: ...
php导入excel源码,利用PHPExcel类库，实现PHP导出导入Excel表格Excel文件！
[温馨提示]源码包解压密码:www.youhutong.com 利用PHPExcel类库,实现PHP导出导入Excel文件!(案例教程源码) 需要注意的地方就是: 1.导出文件时,如果你的字段过多,可 ...
Springboot整合poi +vue实现导出导入Excle表格数据展示图形
工具: idea 数据库: mysql 框架:Springboot 准备工作: 1.导入主要依赖 (poi) <dependency><groupId>org.apache.p ...
Springboot+poi+实现导出导入Excle表格+Vue引入echarts数据展示
需求: 一. 数据库数据表导出Excle表格二. Excle数据导入数据库三. Vue引入Echarts数据展示工具: idea 数据库: mysql 框架:Springboot 准备工作: 1 ...
Excel与DataBase之间的导入导出
目录 Excel与DataBase之间的导入导出前段代码 Body部分导包部分 Script部分后端代码 Util工具层 ExcelUtil工具类读取工具类写入工具类自定义注解类 Enti ...

【vue + Excel表格导入与导出】导入Excel并展示在el-table表格中，表格导出为Excel文件