项目中需要下载报表的功能
vue代码:
<template>
<div class="box">
<div class="box-section">
<div class="box-section-header">
<h4>下载报表</h4>
<div class="box-content-list-date">
<p>选择日期</p>
<div class="date-picker-container">
<el-date-picker type="date" :clearable="false" size="large" value-format="yyyy-MM-dd" placeholder="开始日期"
:picker-options="pickerOptionsStart" v-model="periodStart" class="box-date-picker"
prefix-icon="el-icon-date">
</el-date-picker>
<span>-</span>
<el-date-picker size="large" :clearable="false" type="date" value-format="yyyy-MM-dd" placeholder="结束日期"
:picker-options="pickerOptionsEnd" v-model="periodEnd" class="box-date-picker"
suffix-icon="el-icon-date">
</el-date-picker>
</div>
</div>
</div>
<el-button class="download" @click="download">下载报表</el-button>
</div>
</div>
</template>
页面展示的效果
css代码
<style lang="scss" scoped>
.box{
width: 1180px;
margin: 0 auto;
.box-section{
height: 189px;
background-color: #fff;
.box-section-header{
padding: 0 29px;
height: 120px;
border-bottom:1px solid #F7F8FA ;
h4{
padding-top: 24px;
}
.box-content-list-date {
display: flex;
align-items: center;
margin-top: 14px;
p{
margin-right: 50px;
}
.date-picker-container{
display: flex;
justify-content: space-between;
align-items: center;
span {
margin: 0 13px;
}
}
// 日期图标向右
.date-picker-container /deep/.el-input__prefix {
left: 190px;
}
}
}
.download{
background-color:#4B4C61 ;
color: #fff;
margin: 18px 29px;
}
}
}
</style>
js代码(重点)
<script>
import * as API_Passenger from '@/api/passeengerAnyalysis' // 这里是引入自己定义的接口的文件
export default {
data() {
return {
periodStart: '', // 开始日期
periodEnd: '', // 结束日期
pickerOptionsStart: {}, // 开始日期的选择器配置
pickerOptionsEnd: {} // 结束日期的选择器配置
}
},
methods: {
// 点击下载报表的操作
download() {
// 首先先判断是否选择了日期,如果没有选择日期则提示先选择日期操作
if (this.periodStart === '' || this.periodEnd === '') {
// this.$message.error是在main.js文件中定义了方法
this.$message.error('请先选择日期')
} else {
// 如果选择了日期则开始调用接口文件
API_Passenger.getDownloadReport(this.periodStart, this.periodEnd)
.then((res) => {
// 创建一个 Blob 对象来存储返回的文件数据
const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
// 创建一个 <a> 元素
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
// 自己定义一个要下载的报表的名字例如订单报表.xls
link.download = '订单报表.xls'
// 将 <a> 元素添加到 DOM 中,执行下载操作
document.body.appendChild(link)
link.click()
// 清理临时资源
URL.revokeObjectURL(link.href)
document.body.removeChild(link)
})
.catch((error) => {
// 如果接口返回报错 则提示下载失败
this.$message.error('下载报告失败:')
})
}
}
}
}
</script>
注意 后端接口返回的是地址的情况下可以使用此方法
并且在js文件中加入