方法一：
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-column
prop="name"
label="姓名"
width="200"
:show-overflow-tooltip="true"
align="center"
></el-table-column>
<el-table-column
prop="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-excel
v-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>