How to export excel sheet in element-ui in vue (front-end export)

How to export excel sheet in element-ui in vue

What I use here is the element-UI component that needs to be installed and introduced element-UI module

1. Installation dependencies

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

Two, download the js file to be used

Link: https://pan.baidu.com/s/1kgEwgwv1qrWVSUETtJgyMQ

Extraction code: vmlh

Third, introduce the downloaded js file in the component

Four, use in components

<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>

If there is a date in the table, and the data is returned by the backend, and the date is in milliseconds, then take out index.js (the package method for milliseconds to date) in another folder in the downloaded package. Create a folder under src and import it into the component as shown below:

So it can be used!

Here I write the date in the format of milliseconds, the
specific code is as follows: (actually the same as the code above, just a few lines of code added)

<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>

Result graph: