Vue项目实现导入导出Excel表格功能
前提:在我的项目中我使用的是ElementUi前端UI框架,用到的是里面的Upload上传组件。
第一步:需要安装三个依赖
npm install -S file-saver xlsx (这里其实安装了2个依赖)
npm install -D script-loader
第二步:在main.js文件中全局导入挂载xlsx插件
// 导入excel插件
import XLSX from 'xlsx'
Vue.prototype.XLSX = XLSX
第三步:在src目录新建一个文件夹(名字随意),在这个文件夹里面放入2个JS文件分别是:Blob.js和Export2Excel.js,网上可百度下载。
第四步,需要的页面的template标签中开始写代码(我先写导入的代码)
<!-- 导入Excel --> <el-upload action="/上传文件的接口" :on-change="onChange" :auto-upload="false" :show-file-list="false" accept=".xls, .xlsx" > <el-button type="warning" icon="el-icon-folder-add">批量导入</el-button> </el-upload>
第五步:然后在 methods: {}中配置方法,代码如下:
// ----------以下为导入Excel数据功能--------------
// 文件选择回调
onChange(file, fileList) {
console.log(fileList);
this.fileData = file; // 保存当前选择文件
this.readExcel(); // 调用读取数据的方法
},
// 读取数据
readExcel(e) {
console.log(e);
let that = this;
const files = that.fileData;
console.log(files);
if (!files) {
//如果没有文件
return false;
} else if (!/.(xls|xlsx)$/.test(files.name.toLowerCase())) {
this.$message.error("上传格式不正确,请上传xls或者xlsx格式");
return false;
}
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
// console.log(data)
const workbook = this.XLSX.read(data, {
type: "binary"
});
console.log(workbook.SheetNames);
if (workbook.SheetNames.length >= 1) {
this.$message({
message: "导入数据表格成功",
showClose: true,
type: "success"
});
}
const wsname = workbook.SheetNames[0]; //取第一张表
const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
console.log(ws);
that.outputs = []; //清空接收数据
for (var i = 0; i < ws.length; i++) {
var sheetData = {
// 键名为绑定 el 表格的关键字,值则是 ws[i][对应表头名]
id: ws[i]["id"],
stuNumber: ws[i]["学号"],
stuName: ws[i]["姓名"],
sex: ws[i]["性别"],
tel: ws[i]["电话"],
xueyuan: ws[i]["学院"],
banji: ws[i]["班级"],
lyNumber: ws[i]["楼宇号"],
sushe: ws[i]["宿舍号"]
};
that.studentlist.unshift(sheetData);
}
this.$refs.upload.value = "";
} catch (e) {
return false;
}
};
// 如果为原生 input 则应是 files[0]
fileReader.readAsBinaryString(files.raw);
},
此时导入的功能就结束了,下面开始实现导出的功能
第一步,在template标签中写入导出的按钮,并绑定单击事件,代码如下:
<el-button type="warning" icon="el-icon-download" @click="exportToExcel">批量导出</el-button>
第二步:在methods{}方法中写对应的方法
// ----------以下为导出Excel数据功能-------------- exportToExcel() { //excel数据导出 require.ensure([], () => { const { export_json_to_excel } = require("../../excel/Export2Excel"); const tHeader = [ "id", "学号", "姓名", "性别", "联系电话", "宿舍号", "学院", "班级", "楼宇号" ]; const filterVal = [ "id", "stuNumber", "stuName", "sex", "tel", "sushe", "xueyuan", "banji", "lyNumber" ]; const list = this.studentlist; const data = this.formatJson(filterVal, list); export_json_to_excel(tHeader, data, "学生列表excel"); }); }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])); },
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库