所用技术
利用 xlsx 和 file-saver 导出Excel
点击对应按钮导出表单数据生成Excel格式
如下所示:
代码
!<template>
<div>
<div class="toexcel">
<el-button @click="exportExcel" type="primary" :disabled="disable">导出</el-button>
</div>
<!-- -->
<!-- 表格 -->
<table class="table">
<tr>
<td class="grid-content">代理ID</td>
<td class="grid-content">代理等级</td>
<td class="grid-content">账户名称</td>
<td class="grid-content">代理名字</td>
<td class="grid-content">代理上限额度</td>
<td class="grid-content">注册日期（北京）</td>
<td class="grid-content">状态</td>
<td class="grid-content">总玩家数量</td>
<td class="grid-content">上级代理ID</td>
<td class="grid-content">服务器名称</td>
</tr>
<tr v-for="(item,index) in tableData" :key="index">
<td class="hcontent">{
{
item.ID}}</td>
<td class="hcontent">{
{
item.rank}}</td>
<td class="hcontent">{
{
item.account}}</td>
<td class="hcontent">{
{
item.name}}</td>
<td class="hcontent">{
{
item.max}}</td>
<td class="hcontent">{
{
item.time}}</td>
<td class="jcontent">{
{
item.status}}</td>
<td class="hcontent">{
{
item.num}}</td>
<td class="hcontent">{
{
item.lastID}}</td>
<td class="hcontent">{
{
item.server}}</td>
</tr>
</table>
<!-- 导出 -->
</div>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
data() {
return {
// 计时器------导表按钮3秒内不能重复点击
oldtime:3,//秒数
disable:false,//导表按钮是否禁用
guide:null,//导表计时器
//计时器结束-----------------------------
tableData: [
{
ID: "1100",
rank: "三级代理商",
account: "a3",
name: "a3",
max: "1,000.000",
time: "2018-10-23 01：19：22",
status: "正常",
num: "0",
lastID: "1034",
server: "演示服"
},
{
ID: "1102",
rank: "三级代理商",
account: "a3",
name: "a3",
max: "1,000.000",
time: "2018-10-23 01：19：22",
status: "正常",
num: "0",
lastID: "1034",
server: "演示服"
}
]
}
},
methods:{
// 导表按钮3秒内不能点击，3秒后恢复
exportButton(){
this.oldtime=3;
this.disable=true;
this.guide =setInterval(()=>{
this.oldtime--
if (this.oldtime==0) {
clearInterval(this.guide)
this.disable=false;
}
},1000)
},
exportExcel(){
// 控制多次点击延迟3秒
this.exportButton()
// 设置当前日期
let time = new Date();
let year = time.getFullYear();
let month = time.getMonth() + 1;
let day = time.getDate();
let name = year + "" + month + "" + day;
// console.log(name)
/* generate workbook object from table */
// .table要导出的是哪一个表格
var wb = XLSX.utils.table_to_book(document.querySelector(".table"));
/* get binary string as output */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
// name+'.xlsx'表示导出的excel表格名字
FileSaver.saveAs(
new Blob([wbout], {
type: "application/octet-stream" }),
name + ".xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},
// 确保清除计时器
beforeDestroy(){
clearInterval(this.guide);
this.guide=null;
}
}
};
</script>
<style lang="scss" scoped>
.hcontent{
background-color: transparent;
border: 1px solid #ddd;
font-size: 16px;
}
</style>