使用Vue实现文件下载功能-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_54757930/article/details/119835124

本文介绍了如何在Vue.js应用中实现文件下载的功能。通过创建一个可以触发浏览器下载的链接，详细阐述了Vue组件中处理文件下载的步骤和关键代码，帮助开发者了解并掌握在前端环境中进行文件下载的方法。

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

//httpFile.js（api.js同级）

/**
 * 封装axios请求模块
 * */
import axios from "axios";
// 解决后端返回数据中的大数字问题（控制台报404）
const request = axios.create({
    baseURL: "http://192.168.0.128:17000", // 基础路径
    // transformResponse 允许自定义原始的响应数据（字符串）
    headers: {
        Authorization: sessionStorage.getItem("token")
    },
    transformResponse: [
        function(data) {
            try {
                // 如果转换成功则返回转换的数据结果
                // eslint-disable-next-line no-undef
                return jsonBig.parse(data);
            } catch (err) {
                // 如果转换失败，则包装为统一数据格式并返回
                return {
                    data
                };
            }
        }
    ]
});
// 将基本路径暴露出去
export default request;

//api.js下：
 
import request from '@/apis/httpFile.js';
export function downloadFile(data) { // 达标创优-文件下载
    return request({
        url: `/qualityuptoadv/applicationAndFileController/downloadFile?${data}`,
        method: 'get',
        responseType: "blob",
    })
}

//发请求------下载文件：

async downloadFile() {//下载文件
            const res = await downloadFile(`relafileid=${this.relafileid}`)
            var fileName = res.headers['content-disposition']
            fileName = decodeURI(fileName.split(";")[1].split("filename=")[1])
            if(res.data.data) {
                let url = window.URL.createObjectURL(res.data.data)
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', fileName)
                document.body.appendChild(link)
                link.click()
            }
 },

Vue文件下载