vue处理后端返回的文件数据流,并提供下载接口

返回的数据流
前端对其进行处理并下载
javascript 复制代码
downloadFile(res, fileName) {
       // 使用后台返回的数据创建一个新的Blob对象  
        let blob = new Blob([res]); 
        // 如果fileName参数未定义或为空,则从res的headers中获取'content-disposition'字段,并从中提取文件名  
        if (!fileName) {
            fileName = res.headers['content-disposition'].split('filename=').pop();
        }
        // 检查当前浏览器是否支持msSaveOrOpenBlob方法(这是旧版IE浏览器特有的API)
        if ('msSaveOrOpenBlob' in navigator) {
           // 如果支持,使用该方法下载文件,参数为Blob对象和文件名  
            window.navigator.msSaveOrOpenBlob(blob, fileName);
        } else {
            // 如果不支持,则创建一个新的a元素并隐藏它  
            const elink = document.createElement('a');
             // 设置a元素的download属性为文件名,这使得点击a元素时开始下载文件
            elink.download = fileName;
            // 隐藏a元素,使其在页面上不可见 
            elink.style.display = 'block';
            // 创建一个指向Blob对象的URL,并设置为a元素的href属性,这样a元素就可以下载该Blob对象表示的文件了
            elink.href = URL.createObjectURL(blob);
            // 将a元素添加到文档的body中,使其可见并可以被点击
            document.body.appendChild(elink);
            // 模拟点击a元素,开始下载文件  
            elink.click();
            // 释放之前为Blob对象创建的URL,以释放内存 
            URL.revokeObjectURL(elink.href);
            // 从文档的body中移除a元素,清理内存 
            document.body.removeChild(elink);
        }
    },
相关推荐
掘金安东尼几秒前
⏰前端周刊第444期(2025年12月8日–12月14日)
前端
BD_Marathon2 分钟前
Vue3_响应式数据和setup语法糖
javascript
李广山Samuel3 分钟前
Node-OPCUA 入门(2)-创建一个简单的opcua客户端
javascript
长安牧笛4 分钟前
开发课堂学生专注度分析程序,捕捉学生面部表情和动作,分析专注程度,帮助老师调整教学。
javascript
weixin_448119944 分钟前
Datawhale Hello-Agents入门篇202512第2次作业
java·前端·javascript
BD_Marathon4 分钟前
Vue3_事件渲染命令
开发语言·javascript·ecmascript
程序员爱钓鱼7 分钟前
Node.js 编程实战:路由与中间件
前端·后端·node.js
程序员爱钓鱼10 分钟前
Node.js 编程实战:Express 基础
前端·后端·node.js
周万宁.FoBJ17 分钟前
在vite+Vue3项目中使用 自定义svg 图标,借助vite-plugin-svg-icons 封装SvgIcon组件
vue.js
Cat God 00719 分钟前
完整静态工具网站(尝试)
前端·html