VUE中文件下载并判断状态的方法

最新推荐文章于 2024-03-29 10:07:05 发布

yy406961

最新推荐文章于 2024-03-29 10:07:05 发布

阅读量1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript vue

本文链接：https://blog.youkuaiyun.com/yy406961/article/details/80852709

JavaScript 同时被 2 个专栏收录

13 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文介绍在Vue项目中如何实现文件下载功能，并详细阐述如何监控文件下载的状态，确保下载过程的可控性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新增JS页面

axiosExport.JS

// Axios拦截请求并实现下载
import axios from 'axios'

// download url
export const downloadUrl = (url) => {
    console.log(url)
    let iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    iframe.src = url
    iframe.onload = function () {
        document.body.removeChild(iframe)
    }
    document.body.appendChild(iframe)
}

// Add a response interceptor

// res返回的东西可以跟后端确认
axios.interceptors.response.use(res => {
    if (res.data.status && res.data.status === 300) {
        return '300' // 链接正确，下载失败
    } else {
        downloadUrl(res.request.responseURL)
        return '200' // 链接正确，下载成功
    }
}, error => {
    // Do something with response error
    return error // 链接错误
})

export default axios

VUE页面

import axios from './axiosExport'

// 导出 或 下载
exportDoc () {
    let URL = `下载地址`
    let me = this
    axios.get(URL).then(function (response) {
        if (response === '200') {
            me.$message.success('下载成功！')
        } else {
            me.$message.warning('下载失败！')
        }
    }).catch(function (response) {
        console.log(response);
    });
}