vue + ant-design-vue导出Excel文件流
//点击导出exportData(){this.isLoading = trueif(!this.startTime || !this.endTime){this.$message.warning("请选择开始和结束时间")} else {console.log(this.startTime,this.endTime)httpUtil.axiosHttp({
·
1、使用blob 方式导出
//点击导出
exportData(){
this.isLoading = true
if(!this.startTime || !this.endTime){
this.$message.warning("请选择开始和结束时间")
} else {
console.log(this.startTime,this.endTime)
httpUtil.axiosHttp({
url: `xxx.com`,
params: {
startTime: this.startTime,
endTime: this.endTime
},
method: "get",
'responseType': 'blob'//设置响应的数据类型为一个包含二进制数据的 Blob 对象,必须设置!!!
}).then((res) => {
console.log(res)
if(res.data.code == 20001){
this.$message.warning(res.data.message)
} else {
let fileName = '文件名.xls'
let tableData = res.data
let blob = new Blob([tableData])//创建Blob对象,Blob(blobParts[, options])blobParts: 数组类型, 数组中的每一项连接起来构成Blob对象的数据
let downloadElement = document.createElement('a')//创建dom
let href = window.URL.createObjectURL(blob) //创建下载链接
downloadElement.href = href
downloadElement.download = fileName //下载后文件名
document.body.appendChild(downloadElement)//添加创建的节点
downloadElement.click() //点击下载
document.body.removeChild(downloadElement) //下载完成移除元素
window.URL.revokeObjectURL(href) //释放掉blob对象
this.isLoading = false
}
}).catch((err) => {
setTimeout(() => {
this.isLoading = false
}, 500);
})
}
},
打印的数据:
在这里插入图片描述
导出到excel部分截图:
2、使用xlxs方式导出
使用xlxs首先要安装:npm install xlsx
我把导出封装在全局的js文件中的
使用
接收2个参数:需要导出的数据,导出的文件名
这种方式是把数据生成文件直接下载下来
//点击导出触发
onClickExportTable() {
//先获取需要导出的数据
let { releseDatas } = this.$data;
let exportArr = [["序号", "操作者", "操作时间"]];
for (let i = 0; i < releseDatas.length; i++) {
exportArr.push([
releseDatas[i].id,
releseDatas[i].user,
releseDatas[i].useTime,
]);
}
Util.exportExcle(exportArr, "优惠券发放记录统计");
},
更多推荐
已为社区贡献16条内容
所有评论(0)