vue中 element-ui 如何导出excel表（前端导出）

vue中 element-ui 如何导出excel表

我这里使用的是element-UI组件 需先安装并引入element-UI模块

一、安装依赖

1. npm install -S file-saver xlsx
2. npm install -D script-loader

二、下载要用的js文件

链接：https://pan.baidu.com/s/1kgEwgwv1qrWVSUETtJgyMQ

提取码：vmlh

三、在组件中引入下载的js文件

四、在组件中使用

<template>
<div class="box1">
  <el-row>
    <el-button type="primary" @click="exportExcel">导出</el-button>
  </el-row>
  <el-table :data="tableData" 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>
import Blob from '../../vendor/Blob'
import Export2Excel from '../../vendor/Export2Excel'
export default {
  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: {
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../vendor/Export2Excel');//此处把路径要写对
        const tHeader = ['日期', '姓名', '地址'];
        // 上面设置Excel的表格第一行的标题
        const filterVal = ['date', 'name', 'address'];
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.tableData;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '列表excel');//"列表excel"  是下载后的表名 可修改
      })
    },
    formatJson(filterVal, jsonData) {
       return jsonData.map(v => {
        return filterVal.map(j => v[j])
       })
    }
  }
}
</script>

如果表格中带有日期，且数据是后端返回的，日期是毫秒数，那么将下载的包中另一个文件夹下的index.js（毫秒数转日期的封装方法）拿出，在项目的src下建一个文件夹，并且引入到组件中 如下图：

这样就可以使用啦！

这里我把日期写成了毫秒数的格式，
具体代码如下：（其实跟上面的代码一样，只是添加的几行代码而已）

<template>
<div class="box1">
  <!-- npm install --save scaript-loader -->
  <el-row>
    <el-button type="primary" @click="exportExcel">导出</el-button>
  </el-row>
  <el-table :data="tableData" 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>
import Blob from '../../vendor/Blob'
import Export2Excel from '../../vendor/Export2Excel'
import { parseTime } from "../../utli/index" //引入已封装的秒转为时间的方法
export default {
  data(){
    return{
      tableData: [{
            date: 1605235439000,//此处写成毫秒数
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: 1605234439000,//此处写成毫秒数
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: 1605232479000,//此处写成毫秒数
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: 1605232439000,//此处写成毫秒数
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
    }
  },
  methods: {
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../vendor/Export2Excel');//此处把路径要写对
        const tHeader = ['日期', '姓名', '地址'];
        // 上面设置Excel的表格第一行的标题
        const filterVal = ['date', 'name', 'address'];
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.tableData;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '列表excel');//"列表excel"  是下载后的表名 可修改
      })
    },
    formatJson(filterVal, jsonData) {
       return jsonData.map(v => {
        v['date'] = parseTime(v['date']) //调用自己封装的方法进行将毫秒转为时间(如果是从后端拿值且后端返回的是毫秒数，用此方法)
        return filterVal.map(j => v[j])
       })
    }
  }
}
</script>

结果图：