方法一：
1、安装"file-saver"
npm i -S file-saver xlsx2、引入
在需要导出功能的 .vue 文件中引入
import FileSaver from "file-saver";
import XLSX from "xlsx";3、简单示例（复制即可食用）：
<template><div><div class="buttons"><button class="custom-btn btn-5" @click="exportExcel"><span>导出excel文件</span></button></div><el-table id="table-box" resizable show-overflow :data="tableData" border><el-table-column type="index" label="序号" width="50"></el-table-column><el-table-columnprop="name"label="姓名"width="200":show-overflow-tooltip="true"align="center"></el-table-column><el-table-columnprop="sex"label="性别"width="200":show-overflow-tooltip="true"align="center"></el-table-column></el-table></div>
</template><script>
import FileSaver from "file-saver";
import XLSX from "xlsx";export default {data() {return {tableData: [{ id: 10001, name: "张三", sex: "男" },{ id: 10002, name: "李四", sex: "男" },{ id: 10003, name: "王五", sex: "男" },],};},mounted() {},methods: {getCurrentDate() {const today = new Date();let date = today.getFullYear() + "-";date += (today.getMonth() + 1).toString().padStart(2, "0") + "-";date += today.getDate().toString().padStart(2, "0");return date;},// 定义导出Excel表格事件exportExcel() {const timeInfo = this.getCurrentDate();var xlsxParam = { raw: true };let abc = document.querySelector("#table-box");console.log(abc);/* 从表生成工作簿对象 */var wb = XLSX.utils.table_to_book(document.querySelector("#table-box"),xlsxParam);// 给每一列 设置宽度大小wb["Sheets"]["Sheet1"]["!cols"] = [{ wpx: 60 }, // 1{ wpx: 60 }, // 2{ wpx: 100 }, // 3{ wpx: 100 }, // 4{ wpx: 60 }, // 5{ wpx: 60 }, // 6{ wpx: 60 }, // 7{ wpx: 60 }, // 8{ wpx: 60 }, // 7{ wpx: 60 }, // 8];/* 获取二进制字符串作为输出 */var wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array",});try {FileSaver.saveAs(// Blob 对象表示一个不可变、原始数据的类文件对象。// Blob 表示的不一定是JavaScript原生格式的数据。// File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。// 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。new Blob([wbout], { type: "application/octet-stream" }),// 设置导出文件名称"自定义查询导出" + timeInfo + ".xlsx");} catch (e) {if (typeof console !== "undefined") console.log(e, wbout);}return wbout;},},
};
</script>
<style lang="scss" scoped>
.buttons {margin-bottom: 10px;
}
.custom-btn {width: 130px;height: 40px;color: #fff;border-radius: 5px;padding: 10px 25px;font-family: "Lato", sans-serif;font-weight: 500;background: transparent;cursor: pointer;transition: all 0.3s ease;position: relative;display: inline-block;box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);outline: none;
}
.btn-5 {width: 130px;height: 40px;line-height: 42px;padding: 0;border: none;background: rgb(255, 27, 0);background: linear-gradient(0deg,rgba(255, 27, 0, 1) 0%,rgba(251, 75, 2, 1) 100%);
}
.btn-5:hover {color: #f0094a;background: transparent;box-shadow: none;
}
.btn-5:before,
.btn-5:after {content: "";position: absolute;top: 0;right: 0;height: 2px;width: 0;background: #f0094a;box-shadow: -1px -1px 5px 0px #fff, 7px 7px 20px 0px #0003,4px 4px 5px 0px #0002;transition: 400ms ease all;
}
.btn-5:after {right: inherit;top: inherit;left: 0;bottom: 0;
}
.btn-5:hover:before,
.btn-5:hover:after {width: 100%;transition: 800ms ease all;
}
</style>
方法二：
1、安装"vue-json-excel"
npm install vue-json-excel -S2、在项目的入口文件(main.js)中引入
import Vue from 'vue'
import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel)3、简单示例（复制即可食用）：
<template><div><el-row><el-col :span="6"> </el-col><el-col :span="12"><h1>{{ msg }}</h1><download-excelv-if="json_data.length >= 0"class="el-button":data="json_data":fields="json_fields"worksheet="My Worksheet"name="用户信息列表">导出Excel</download-excel></el-col><el-col :span="6"> </el-col></el-row><el-table :data="json_data" border style="width: 100%"><el-table-column prop="type" label="序号" align="center" width="180"></el-table-column><el-table-column prop="userName" label="姓名" align="center" width="180"></el-table-column><el-table-column prop="age" align="center" label="年龄"></el-table-column><el-table-column prop="phone" align="center" label="手机号"></el-table-column><el-table-column prop="createTime" align="center" label="注册时间"></el-table-column></el-table></div>
</template><script>
import JsonExcel from "vue-json-excel";export default {name: "HelloWorld",components: {downloadExcel: JsonExcel,},data() {return {msg: "使用vue-json-excel插件导出Excel",json_fields: {//导出Excel表格的表头设置序号: "type",姓名: "userName",年龄: "age",手机号: "phone",注册时间: "createTime",},json_data: [{userName: "张三",age: 18,phone: 15612345612,createTime: "2019-10-22",},{userName: "李四",age: 17,phone: 15612345613,createTime: "2019-10-23",},{userName: "王五",age: 19,phone: 15612345615,createTime: "2019-10-25",},{userName: "赵六",age: 18,phone: 15612345618,createTime: "2019-10-15",},],};},created() {this.initList();},methods: {initList() {for (let i in this.json_data) {this.json_data[i].type = parseInt(i) + 1;}},},
};
</script>
<style scoped>
.el-button {background-color: lightskyblue;
}
</style>
