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);
        }
    },
相关推荐
前端双越老师8 分钟前
程序员 1v1 访谈系列第二期:很焦虑但又不知道干啥
前端·ai编程·全栈
雪芽蓝域zzs15 分钟前
Webstorm打开uniapp uvue文件报红处理方案
vue.js
广州华水科技22 分钟前
北斗形变监测传感器在大坝安全监测中的应用与优势分析
前端
孔令飞29 分钟前
如何学习Go
前端
HUIBUR科技33 分钟前
AI 中枢,面向企业场景构建的 AI 智能体
前端·数据库·人工智能
怕浪猫40 分钟前
给AI配一台电脑,开源版Muse来了,OpenMuse赶紧去二次开发吧
javascript·面试·github
随便写个软件1 小时前
【新版本】EasyExplorer资源管理器 3.12.0——地址栏重要更新
运维·服务器·前端·everything·资源管理器
Jack N1 小时前
【Strapi 系列之二】Collection / Single / Component 怎么选?Strapi 字段大全一篇讲透
前端·javascript·strapi
hiahiahia1231 小时前
Agent Tool 执行失败怎么办
服务器·前端
Java后端的Ai之路1 小时前
09-React组件生命周期
前端·react.js·前端框架