vue实现点击按钮导出Excel
导出(静态导出)
所用技术
利用 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>
参考
导出(后端接口)
这个导出是导出全部的数据 如果卡条件进行拼接即可
后端提供的是数据流的格式
如下所示:
<el-button size="mini" type="primary" @click="exportData">导出</el-button>
导出不需要加密直接拿到请求数据接口进行调用请求
// 导出操作
exportData() {
//首先拿到完整的接口路径(fileData)
//this.$appConst.baseUrl这个是共用的接口头
let fileData = this.$appConst.baseUrl + "/XXXX/XXXs/xxxx/xxxxLog"
const url = window.URL.createObjectURL(
new Blob([fileData], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
})
)
const link = document.createElement('a')
link.href = url
link.setAttribute('download', '文件')
// 下载文件的名称及文件类型后缀
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象
},
}
批量导出(后端接口)
导出会带勾选状态
selectedRowkeys 自定义的勾选状态
<el-button size="mini" type="primary" @click="exportData">导出</el-button>
export default {
data() {
return {
url: {
exportXlsUrl: 'yruei/owskdjchvb'
}
}
},
created() {
},
methods: {
exportData(fileName, type) {
// selectedRowKeys 勾选状态
if (this.selectedRowKeys.length <= 0) {
//弹出提示
this.$message.warn('至少选择一个记录')
}
if (!fileName || typeof fileName !== 'string') {
fileName = "导出文件"
}
let batchNos = []//定义一个空数组
if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
this.selectedRowKeys.forEach(item => {
batchNos.push(item)//push方法将一个或多个元素插入数组的尾部
})
}
// 判断单勾还是多勾状态
let parma = {}
parma = Object.assign({}, this.queryParam)
parma['batchNos'] = batchNos
if (type == '1') {
this.url.exportXlsUrl = this.url.exportXlsUrl //(单个)
} else {
this.url.exportXlsUrl = this.url.downloadModules//(多个)
}
// 对应接口请求 downFile是引入的接口路径
downFile(this.url.exportXlsUrl, parma).then((data) => {
if (!data) {
this.$message.warning("文件下载失败")
return
}
if (typeof window.navigator.msSvaeBlob !== 'undefined') {
// 兼容IE10
window.navigator.msSaveBlob(new Blob([data]), fileName + '.xlsx')
} else {
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName + '.xlsx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)// 下载完后移除元素
window.URL.revokeObjectURL(url)// 释放掉blob对象
}
})
}
}
}
</script>