vue+el-table实现上传（upload）和下载（down

在不使用后端的接口的情况下，前端也可以通过插件实现数据的下载
1、安装插件
需要安装xlsx 和file-saver

npm install --save xlsx file-saver

2、template代码

<template>
  <div class="uploadDownload">
    <h1>download view</h1>
    <el-button class="mdi mdi-export" @click="exportExcel" type="success" icon="el-icon-download">导出</el-button>
    <el-table :data="tableData" id="download" title="title">
      <el-table-column prop="num" label="编号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="pos" label="职称"></el-table-column>
    </el-table>
  </div>
</template>

2、script

<script>
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
export default {
data() {
        return {
            title:'职工表',
            tableData:[
                {num:1001,name:'arika01',age:18,sex:'男',pos:'IT'},
                {num:1002,name:'arika02',age:19,sex:'女',pos:'会计'},
                {num:1003,name:'arika03',age:20,sex:'男',pos:'CTO'},
                {num:1004,name:'arika04',age:21,sex:'女',pos:'CEO'},
                {num:1005,name:'arika05',age:22,sex:'女',pos:'CFO'},
                {num:1006,name:'arika06',age:23,sex:'男',pos:'总裁'}
            ]
        };
    },
    methods: {
        exportExcel() {
            var wb = XLSX.utils.table_to_book(
                document.querySelector("#download")
            );
            var wbout = XLSX.write(wb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array"
            });
            try {
                FileSaver.saveAs(
                    new Blob([wbout], { type: "application/octet-stream" }),
                    this.title+".xlsx"
                );
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
        }
    }
}
</script>