vue中导出excel

依赖

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

下载相关js文件

• 下载地址
• 将文件放在自己需要的目录下

模板结构

<template>
  <div class=''>
    <el-button type="primary" :loading='loading' @click="handleDownload">导出</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      stripe>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

脚本

<script>
export default {
  name: 'list',
  data () {
    return {
      loading: false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    handleDownload () {
      this.loading = true
      import('@/vendor/导出excel的js文件/Export2Excel').then(excel => {
        const tHeader = ['日期', '名字', '地址'] // 导出表格的顶部header
        const filterVal = ['date', 'name', 'address'] // 跟要导出的数据key一一对应
        const list = this.tableData
        // 筛选出二维数组
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '测试excel',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.loading = false
      })
    },
    formatJson (filterVal, list) {
      return list.map(v => filterVal.map(j => {
        return v[j]
      }))
    }
  }
}
</script>