Vue+elementUi完成excel表格数据的导出

菜鸟笔记本

已于 2022-03-09 16:28:08 修改

阅读量3.3k

点赞数 1

分类专栏： vue 文章标签： Vue+elementUi完成excel表格数据的导出

于 2019-11-13 11:47:39 首次发布

本文链接：https://blog.csdn.net/qq_25983579/article/details/103045416

版权

vue 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

1.安装依赖

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

2.下载js资源并引入

2.1下文件

链接：https://pan.baidu.com/s/19aAGaLZkznmgIevUYqMHyQ
提取码：ihbw
–来自百度网盘超级会员V4的分享

2.2存放文件

在这里插入图片描述

2.3修改文件引入路径

在这里插入图片描述

3.页面导入运用

3.1添加导入按钮并绑定点击事件

<el-button type="primary" @click="export2Excel()">导出</el-button>

3.2编写点击事件的方法

	//导出excel
      export2Excel() {
        require.ensure([], () => {
          const { export_json_to_excel } = require('../../../../vendor/Export2Excel');;
          const tHeader = ['锁身编号','钥匙编号', '挂牌编号', '移动终端','日志时间','操作类型', '操作人员'];
          // 上面设置Excel的表格第一行的标题
          const filterVal = ["lockCode",'keyCode', 'quotationNumber',"terminal","createTime","operType", 'userName'];
          // 上面的lockCode、keyCode、quotationNumber,terminal,createTime,operType,userName是dataList里对象的属性
          const list = this.dataList;  //把data里的dataList存到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]))
      }

在这里插入图片描述