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);
        }
    },
相关推荐
奔跑路上的Me1 分钟前
前端导出 Word/Excel/PDF 文件
前端·javascript
bluceli1 分钟前
JavaScript异步编程深度解析:从回调到Async Await的演进之路
前端·javascript
青青家的小灰灰13 分钟前
Vue 3 新标准:<script setup> 核心特性、宏命令与避坑指南
前端·vue.js·面试
SuperEugene14 分钟前
路由与布局骨架篇:布局系统 | 头部、侧边栏、内容区、面包屑的拆分与复用
前端·javascript·vue.js
代码煮茶15 分钟前
前端网络请求实战 | Axios 从入门到封装(拦截器 / 错误处理 / 重试)
javascript
进击的尘埃15 分钟前
组合式函数 Composables 的设计模式:如何写出可复用的 Vue3 Hooks
javascript
大金乄18 分钟前
用canvans画一个流程图
前端
大金乄21 分钟前
TreeSelect 是一个基于 Element UI 的树形选择器组件,结合了 el-select 和 el-tree 的功能,支持单选和多选模式,支持树形
前端
最强僚机斯内克22 分钟前
Vue 3 + Vite 自动引入插件完整指南(unplugin-vue-components,unplugin-auto-import)
vue.js
大金乄22 分钟前
自动构建打包脚本(开发环境)
前端