Vue后端接口下载文件

一、二进制文件流下载

1、axios配置

// 文件位置：@/utils/request.js

import axios from "axios"

let url = 'http://localhost:9999/'

const request = axios.create({
    baseURL: url,
    timeout: 5000, // 超时时间
})

// post请求默认数据格式
request.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

// 请求拦截
request.interceptors.request.use(request => {
    var user = localStorage.getItem("currentUser");
    if (user) {
        user = JSON.parse(user);
        request.headers['Authorization'] = user.token
    }
    return request;
}, error => {
    return error
})

// 响应拦截
request.interceptors.response.use(
    (response) => {
        return response.data;
    },
    (error) => {
        return error;
    }
);

export default request

2、请求接口配置

// 文件位置：@/utils/api.js

import request from '@/utils/request.js'

exportLog(params) {
    return request.get("/api", { params, responseType: "blob" })
},


// 后端返回的是二进制文件流，必须要在请求时传入{{ responseType: "blob" }}参数

3、组件导出方法配置

<template>
    <div>
        <ul>
            <li>
                <span>时间 :</span>
                <el-date-picker
                size="mini"
                v-model="times"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
            </li>

            <li>
                <el-button @click="export">导出</el-button>
            </li>
        </ul>
    </div>
</template>

<script>
import api from '@/utils/api.js'

export default {
    data(){
        return {
            times:[],
        }
    },
    methods:{
        export(){
            let params = {
                startTime:times[0],
                endTime:times[1]
            }

            api.exportLog(params).then((res) => {
                // 创建一个a标签
                const link = document.createElement("a");
                // 创建一个blob实例
                let blob = new Blob([res], { type: "application/x-excel" });
                // 隐藏a标签显示
                link.style.display = "none";
                // 生成url并添加到a标签的href属性上
                link.href = URL.createObjectURL(blob);
                // 下载的文件名称
                link.download = "logExport.xls";
                // 将a标签添加到body中
                document.body.appendChild(link);
                // 模拟点击a标签
                link.click();
                // 将a标签从body中移除
                document.body.removeChild(link);
                // 释放blob对象
                URL.revokeObjectURL(link.href);
              }).catch((error) => {
                this.$message({
                  message: error,
                });
              });
        }
    }
}
</script>

二、直接下载

1、组件导出方法配置

// 组件中请求，不过下载时不能重命名文件，只能下载后再修改文件名称

<template>
    <div>
        <ul>
            <li>
                <span>时间 :</span>
                <el-date-picker
                size="mini"
                v-model="times"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
            </li>

            <li>
                <el-button @click="export">导出</el-button>
            </li>
        </ul>
    </div>
</template>

<script>
import api from '@/utils/api.js'

export default {
    data(){
        return {
            times:[],
        }
    },
    methods:{
        export(){
            // url拼接
            let url = `http://localhost:9999/api
                       ?startTime=${times[0]}
                       &endTime=${times[1]}`

            // 访问url下载文件
            window.location.href = url
        }
    }
}
</script>