VUE导出文件到EXCEL表格实例演示

写在前面

最近项目比较多，没太多时间更新博客，见谅、见谅、见谅！！！今天更新一片老生常谈的功能，导出数据到excel表格中，照例我还是会将源码放到这里gaojizu，感兴趣或者需要的可以直接clone就可以了！这个项目可以关注一下， 我会持续更新的，里面有很多使用的vue小功能，相信你们会用到的，不要白嫖，给我的git点个关注不过分吧！

效果预览

导出成功

导出的EXCEL

源码：

<template> <div> <el-button id="btn" type="primary" icon="el-icon-download" @click="handleDownload">导出EXCEL</el-button> <el-table :data="studentList" border stripe style="width: 100%;margin-top: 20px"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="sex" label="性别"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="住址"></el-table-column> </el-table> </div> </template> <script> export default { name: "exportExcel", data() { return { studentList: [], temp_list: [] } }, created() { this.getStudents() }, methods: { getStudents() { this.$axios.get("api/getStudents.do").then(res => { this.studentList = res.data.data.list console.info(res) }) }, handleDownload() { const loading = this.$loading({ lock: true, text: '导出中,请稍后......', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }) //这里是过滤条件，自己根据需要进行使用 let query_params = { 'search': null, "page": null, 'page_size': null } this.$axios.get("api/getStudents.do").then(response => { this.temp_list = response.data.data.list import('@/vendor/Export2Excel').then(excel => { const tHeader = ['Id', '姓名', '性别', '年龄', '住址'] const filterVal = ['id', 'name', 'sex', 'age', 'address'] if (this.temp_list) { const data = this.formatJson(filterVal, this.temp_list) excel.export_json_to_excel({ header: tHeader, data, filename: '学生表' }) } else { this.$notify({ title: 'Failure', message: "未能获取到任何数据", type: 'error', }) } loading.close() this.$notify({ title: '成功', message: '成功导出' + this.temp_list.length + '条数据', type: 'success' }); this.temp_list = null }) }) }, /** * @function formatJson 格式化 * @param filterVal * @param jsonData * @returns {*} */ formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => { if (j === 'timestamp') { return parseTime(v[j]) } else { return v[j] } })) }, } } </script> <style scoped> #btn { float: left; margin: 10px 10px 10px 10px; } </style>

这里因为没有后端的接口，我使用的是mockjs模拟的接口，接口具体数据是这样的，什么你问我mockjs怎么用的？额…我没写过相关的文章吗？下次抽时间写一下吧！

接口返回数据格式

/** * 模拟接口返回的数据 * @type {*[]} */ let lists = [] for (let i = 0; i < 100; i++) { lists.push({"id": + i, "name": "name" + i, "sex": 'sex' + i, "age": 'age' + i, "address": 'address' + i}) } console.info(lists) const studentLists = { "code": 20000, "message": "success", "data": { "list": lists } } export default studentLists

具体的目录结构，怎么使用可以直接下载github里面的源码进行使用，这里简单的说一下需要安装的两个插件 知道你们懒，所以这两句命令是：

npm install -S file-saver xlsx npm install -D script-loader

相信csdn会在我上面这两行代码右边友好的加上复制的按钮，我就不加了！ PS：如果最后你们使用的时候，效果和我的不一样，那么需要反思一下了，为什么不一样，是不是js文件没有导入呢？如果你下载了我的git上面的代码就不会有问题，因为我直接引入了那两个文件，就是这两个文件 那如果你很讨厌使用git，那么你可以直接去我的下载区下载资源，不知道在哪下载的话，点击这里下载

苦逼的我只能利用中午休息的时间给你们更新，我太难了，我最近在杭州，有小伙伴找我玩的可以联系我，请我吃烧烤的话我不会拒绝的！😂😂😂😂😂😂😂

何处锦绣不灰堆 认证博客专家 vue nodejs git 人系于妻子舍宅，甚于牢狱。牢狱有散释之期，妻子无远离之念。情爱于色，岂惮驱驰。虽有虎口之患，心存甘伏。投泥自溺，故曰凡夫。透得此门，出尘罗汉。