前端Vue+axios请求后数据流下载

最新推荐文章于 2024-06-05 10:04:14 发布

zilvzsy

最新推荐文章于 2024-06-05 10:04:14 发布

阅读量477

点赞数

分类专栏：前端问题文章标签： Vue+axios javascript axios

本文链接：https://blog.csdn.net/zilvzsy/article/details/117714223

版权

前端问题专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客记录了作者在使用 Vue 和 axios 进行文件下载时遇到的问题及解决过程。主要问题是请求在应该走 then 的情况下错误地进入了 catch，原因是共用了全局的 axios 实例。解决方法是创建新的 axios 实例，避免了配置冲突，从而成功实现了文件下载功能。

摘要由CSDN通过智能技术生成

记笔记，免忘记！

记录写这个时候碰到的坑，仅为方便后面自己查询！

1、首先需求是，选择时间段后下载xls文件，通过后台接口请求后结果如下图

2、但是得到这样的之后，请求怎么样都走catch不走then，于是我觉得是因为共用https.js里面的axios拦截导致了直接走catch

3、然后我就重写了个js，重引入axios，并重写了一个axios请求，但是怎么点下载都是

一直百度，然后对照自己写的代码，真的没啥毛病呀，我真是要裂开。两小时就是没整出来。代码如下：

import axios2 from 'axios';
import Vue from 'vue'
import {
    baseUrl
} from '../../../public/url'
// 
function exportFilePost(data) {
    return axios2({
            method: data.method,
            url: baseUrl + data.url,
            data: data.params,
            responseType: 'blob',
            headers: {
                token: localStorage.getItem('auvtoken') || ''
            },
        })
        .then((res) => {
            console.log(this)
            downloadFile(res, data)
        }).catch(error => {
            Vue.prototype.$message.error(error || '请求异常')
            console.log(error)
        })
}

然后通过断点，打印呀，最后发现这个还是走了原来了axios所有配置。

最后正确代码如下：

import axios from 'axios';
import Vue from 'vue'
import {
    baseUrl
} from '../../../public/url'

//重点来了：
let axios2 = axios.create() //axios要重定义实例，否则还会延用原来那个全局实例参数

function exportFilePost(data) {
    return axios2({
            method: data.method,
            url: baseUrl + `${data.url}`,
            data: data.params,
            responseType: 'blob',
            headers: {
                // 'Content-Type': 'application/json',
                // 'Content-Type': data.contentType || 'application/vnd.ms-excel',
                token: localStorage.getItem('auvtoken') || ''
            },
        })
        .then((res) => {
            console.log(this)
            downloadFile(res, data)
        }).catch(error => {
            Vue.prototype.$message.error(error || '请求异常')
            console.log(error)
        })
}

//以下网上抄的
function downloadFile(res, data) {
    console.log(res, data)
    const link = document.createElement('a')
    let blob = new Blob([res.data], {
        type: 'application/vnd.ms-excel'  //application/octet-stream
    })
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)

    // link.download = res.headers['content-disposition'] //下载后文件名
    link.download = data.fileName //下载的文件名
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}


//vue页面引用

// 导出
        handleDownloadLog() {
            let Obj = {
                method: 'POST',
                url: '',
                fileName: '日志',
                params:{
                    beginTime:this.timestamp(this.Svalue),
                    endTime:this.timestamp(this.Evalue)
                }
                
            }
            exportFilePost(Obj)
        },

希望对正在写这个的你有帮助