项目中需要下载报表的功能

项目中需要下载报表的功能

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文件中加入

responseType: ‘blob’ 否则可能会报错