vue.js中导出Excel表格的案例分析
程序员文章站
2022-05-14 15:18:21
有一个项目需求,要求在前端项目中导出excel表格,经过查找代码,vue.js确实可以实现,具体实现步骤为:
1.安装依赖
npm install -s fil...
有一个项目需求,要求在前端项目中导出excel表格,经过查找代码,vue.js确实可以实现,具体实现步骤为:
1.安装依赖
npm install -s file-saver xlsx npm install -d script-loader
2.导入两个js
下载blob.js和export2excel.js,在src目录下新建excel文件夹,里面放入blob.js和export2excel.js两个js文件
3.在main.js引入这两个js文件 **
import blob from './excel/blob' import export2excel from './excel/export2excel.js'
4.在组件中使用
//导出的方法 exportexcel() { require.ensure([], () => { const { export_json_to_excel } = require('../excel/export2excel'); const theader = ['序号', '昵称', '姓名']; // 上面设置excel的表格第一行的标题 const filterval = ['index', 'nickname', 'name']; // 上面的index、nickname、name是tabledata里对象的属性 const list = this.tabledata; //把data里的tabledata存到list 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])) }
theader是表头,filterval 中的数据是表格的字段,tabledata中存放表格里的数据,类型为数组,里面存放对象,表格的每一行为一个对象。
tabledata 中的值为:
data () { return { tabledata: [ {'index':'0',"nickname": "沙滩搁浅我们的旧时光", "name": "小明"}, {'index':'1',"nickname": "女人天生高贵", "name": "小红"}, {'index':'2',"nickname": "海是彩色的灰尘", "name": "小兰"} ] } }
最后实现的效果图:
如果运行时,报如下所示的错误:
这是因为export2excel.js的设置需要改下:
注: 把require('script-loader!vendor/blob')改为 require('./blob.js')
项目中实际应用案例
/ 导出 */ formatjson(filterval, jsondata) { // console.log(filterval,jsondata) return jsondata.map(v => filterval.map(j => { if(j == 'xxdz'){ //..详细地址 return v.name1 + v.name2 + v.name3 + v.gridname + v.xxdz } if(j == 'qyzw'){ //..区域装维 return v.name2 + '/' + v.yxcname } if(j == 'state'){ //..工单状态 return this.config.gzdstatelist[v.state] } return v[j] })) }, ygexcel() { let params = {} let queryform = this.deepclone(this.queryform) params.currentpage =1 params.pagesize = this.count params.queryform = queryform params.prop = this.prop params.order = this.order // params.ifexport = true this.startloading() this.$post( "/api/usercontroller/getlist",params, (data) => { console.log(data) let tabledata =data.list; // let tabledata = data.list; require.ensure([], () => { const { export_json_to_excel } = require('../vendor/export2excel'); const theader = this.config.ygbheader;//在config中定义表头 const filterval = this.config.ygfilterval;//在config中定义表头对应的字段 const data = this.formatjson(filterval, tabledata); export_json_to_excel(theader, data, '员工详情表');下载是显示的表名 }) }) },
总结
以上所述是小编给大家介绍的vue.js中导出excel表格的案例分析,希望对大家有所帮助