vue导出表格数据到Excel

在项目开发中,遇到需要导出表格数据到Excel的需求,在搜索之后,找到方法如下:

  1. 安装插件
npm install -S file-saver xlsx

npm install -D script-loader
  1. 下载附件(Gitee)附件
  2. 下载的文件放进项目目录,,为了方便我放在同目录:
    在这里插入图片描述
  3. 修改Export2Excel.js文件前几行:
require('script-loader!file-saver')
require('./Blob')
require('script-loader!xlsx/dist/xlsx.core.min')
  1. vue文件:
html:
 <el-button size="mini"
            @click="getExcel">导出</el-button>
js:
  getExcel() {
    require.ensure([], () => {
      const { export_json_to_excel } = require('./Export2Excel.js')
      // 表头
      const tHeader = [
        'day',
        'total'
      ]
      // 对应字段,与表头一一对应
      const filterVal = [
        'day',
        'total'
      ]
      // 需要导出的数据
      const list = this.tableData
      const data = this.formatJson(filterVal, list)
      // 表头,数据,导出文件名
      export_json_to_excel(tHeader, data, '导出列表1')
    })
  },

  formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
  },
  1. 完成
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值