Vue 根据table导出一个 简单的Excel表格

一. 首先安装依赖。

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

二. 在项目中创建一个文件夹（随便哪里都行，只要是能引对），我这边是放在 src 下了,该文件夹的名字也是随便起，我这边叫 vendor

• 然后先下载两个文件，链接 链接:pan.baidu.com/s/1l_d62Y-U… 提取码:ya1v
• 把刚才下载的文件 放在 verdor文件夹里面。

  

三.

• 在需要导出的页面中，写一个click事件。调用下面的方法，浏览器会自动下载。

    html.
    <el-button type="primary" style="margin-top: 20px;" @click="handleDownload">导出</el-button>
    --------
    js.
    
    handleDownload () {
      this.downloadLoading = true
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel')
        const tHeader = ['序号', '姓名', '地址']
        const filterVal = ['id', 'author', 'reviewer']
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '列表excel')
        this.downloadLoading = false
      })
    },
    
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }

到这所有就结束了，我一开始也是各种百度，结果发现下载的那两个 文件有点问题。上面下载的是我改完的，亲测没毛病。

下面是我的所有demo：

Excel.vue

<template>
  <div class="about" style="width: 80%;margin: 0 auto;">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="序号" width="180"></el-table-column>
      <el-table-column prop="author" label="姓名" width="180"></el-table-column>
      <el-table-column prop="reviewer" label="地址"></el-table-column>
    </el-table>
    <el-button type="primary" style="margin-top: 20px;" @click="handleDownload">导出</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          timestamp: 375676396994,
          author: '哈哈哈哈',
          reviewer: 'Angela'
        },
        {
          id: 2,
          timestamp: 375676396994,
          author: '嘿嘿嘿',
          reviewer: 'Angela'
        },
        {
          id: 3,
          timestamp: 375676396994,
          author: '嘻嘻嘻',
          reviewer: 'Angela'
        }
      ]
    }
  },
  methods: {
    handleDownload() {
      this.downloadLoading = true
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel')
        const tHeader = ['序号', '姓名', '地址']
        const filterVal = ['id', 'author', 'reviewer']
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '列表excel')
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

效果图：