vue把数据导出为Excel表格的方法
vue把数据导出为Excel表格的方法
·
vue把数据导出为Excel表格的方法
由于项目中要用到把数据导出为Excel的需求,自己用完之后做一个小结,这是比较简单的使用方法,主要用到export2Excel、file-saver和xlsx的的插件,以下是实现的步骤:
1.创建一个vue实例,并在vue实例中创建一个按钮,用来测试导出功能
<el-button size="small" type="Pprimary" @click="exportToExcel">导出</el-button>
2.用export2Excel.js文件(百度搜索),配合file-saver文件(file-saver在gitee搜索肖嘉腾版的),并且需要安装xlsx插件
//xlsx安装命令 npm i xlsx
3.在export2Excel.js引入file-saver文件中的saveAs和xlsx插件
import { saveAs } from '@/utils/FileSaver.min.js' import * as XLSX from 'xlsx'
4.在需要文件导出的vue实例引入export2Excel.js的export_json_to_excel 方法
import { export_json_to_excel } from '@/utils/Export2Excel'
5.export_json_to_excel 需要的数据有header和data,我们只是简单的测试,所以把需要的数据定义成这两个参数即可(其他参数需要可以自行设置);export_json_to_excel 方法是将一段 json 数据对象导出成 excel ,当然还有将一个原生table表格导出成 excel方法是export_table_to_excel ;
object.keys()方法是获取对象的键(‘姓名’: 'username’中的姓名),返回的是一个数组
//object.keys()方法举例: const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.keys(object1)); // expected output: Array ["a", "b", "c"] //结
//使用测试 export default { method:{ exportToExcel(){ //通过数据枚举的方法,把表头和data定义好,下面这些方法可以把表头的英文名数据转换为中文名 const testData = { '日期': 'time', '手机号': 'mobile', '姓名': 'username' } const header = Object.keys(testData) const data = res.rows.map(user => { const userArr = [] for (const key in testData) { const newKey = testData[key] userArr.push(user[newKey]) } return userArr }) //把定义好的header和data放进export_json_to_excel的函数里作为参数 export_json_to_excel({ header, data }) //提供一个简单的测试数据,测试时注意要把上面数据注释掉 export_json_to_excel({ header: ['姓名', '年龄'], data: [ ['tom', 12], ['jerry', 13] ] }) } } }
- 这是测试数据打印出来的内容
姓名 年龄 tom 12 jerry 13
亲测有效,快点试试吧!
更多推荐
已为社区贡献1条内容
所有评论(0)