vue+element 实现上传（upload）和下载（download）

最近自己摸索了一下elementui ,学了点东西总结记录分享一下

element中文官网上有upload的文档内容，虽然不多，但还是可以用的：http://element-cn.eleme.io/#/zh-CN/component/upload

但好像没有看到下载的内容，就自己去找了一波。下面两张图是效果图。

简单点直接附上代码

<template>
    <div>
        <h1>download view</h1>
        <el-button class="mdi mdi-export"  @click="exportExcel">导出</el-button>
        <el-table :data="tableData" id="download" title="title">
            <el-table-column prop="1" label="编号"></el-table-column>
            <el-table-column prop="2" label="姓名"></el-table-column>
            <el-table-column prop="3" label="年龄"></el-table-column>
            <el-table-column prop="4" label="性别"></el-table-column>
            <el-table-column prop="5" label="职称"></el-table-column>
        </el-table>
    </div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
    data() {
        return {
            title:'职工表',
            tableData:[
                {1:1,2:'a',3:18,4:'男',5:'员工'},
                {1:2,2:'b',3:19,4:'男',5:'组长'},
                {1:3,2:'c',3:18,4:'女',5:'员工'},
                {1:4,2:'d',3:19,4:'男',5:'员工'},
                {1:5,2:'e',3:28,4:'男',5:'部门经理'},
                {1:6,2:'f',3:18,4:'女',5:'员工'},
                {1:7,2:'g',3:16,4:'男',5:'员工'},
                {1:8,2:'h',3:17,4:'男',5:'员工'},
                {1:9,2:'i',3:21,4:'女',5:'销售经理'},
                {1:10,2:'j',3:30,4:'男',5:'经理'},
            ]
        };
    },
    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>

界面没有做css处理，糙是糙了点，直接写了点数据，但效果还是可以的！

补充一下：需要安装xlsx 和file-saver

npm install --save xlsx file-saver