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);
        }
    },
相关推荐
江晓曼*凡云基地7 分钟前
Hermes Agent 多Agent模式:并行拆解复杂任务的实战指南
javascript·windows·microsoft
AC赳赳老秦10 分钟前
OpenClaw与WPS宏联动:批量执行WPS复杂操作,解决办公表格批量处理难题
java·前端·数据库·自动化·需求分析·deepseek·openclaw
小白学大数据22 分钟前
Python 爬虫动态 JS 渲染与无头浏览器实战选型指南
开发语言·javascript·爬虫·python
Larcher27 分钟前
# 告别“古法编程”:吴恩达 AI 课程学习笔记与生日贺卡项目实战
前端·github·ai编程
叫我少年31 分钟前
Vue3 状态管理 Pinia 入门指南
vue.js
用户8524950718432 分钟前
# 大二前端新人的AI初体验:跟着吴恩达学“Vibe Coding”,我如何用提示词“指挥”AI写代码?
前端
bupt_0133 分钟前
Hermes深入理解及源码解析(二):Hermes的记忆机制
java·服务器·前端
飘尘34 分钟前
WebAssembly 是什么?它为什么重要?
前端·javascript
情绪总是阴雨天~35 分钟前
大模型 Function Call(函数调用)详解:原理、实践与数据库智能查询 Agent
前端·数据库·人工智能
之歆38 分钟前
DAY_10 JavaScript 深度解析:原型链 · 引用类型 · 内置对象 · 数组方法全攻略(上)
开发语言·javascript·ecmascript