导出表单为Excel

1、安装依赖

• npm install -S file-saver 用来生成文件的web应用程序
• npm install -D script-loader 将js挂在在全局下

2、下载Blob.js 和 Export2Excel.js

• 在src目录下创建一个文件(vendor)，存放Blob.js 和 Export2Excel.js

3、页面结构

<template>
  <div class="hello">
    <el-button style="margin:0 0 20px 20px;" type="primary" icon="document" @click="export2Excel">export</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <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: 'Main',

  data () {
    return {
      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: {
    
    export2Excel () {
      // require.ensure([], () => {
      //   const { export_json_to_excel } = require('@/vendor/Export2Excel') // 引入文件
      //   const tHeader = ['日期', '姓名', '地址'] // 将对应的属性名转换成中文
      //   // const tHeader = [];
      //   const filterVal = ['date', 'name', 'address']// table表格中对应的属性名
      //   const list = this.tableData
      //   const data = this.formatJson(filterVal, list)
      //   export_json_to_excel({
      //     header: tHeader,
      //     data
      //   })
      // })
      // 或者使用下面方法
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['日期', '姓名', '地址']
        const filterVal = ['date', 'name', 'address']
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data
        })
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

<style scoped>

</style>