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

返回的数据流

前端对其进行处理并下载
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);
        }
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/350030.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于阿里云服务器部署幻兽帕鲁联机服务器详细教程

如何自建幻兽帕鲁服务器?基于阿里云服务器搭建幻兽帕鲁palworld服务器教程来了,一看就懂系列。本文是利用OOS中幻兽帕鲁扩展程序来一键部署幻兽帕鲁服务器,阿里云百科aliyunbaike.com分享官方基于阿里云服务器快速创建幻兽帕鲁服务器教程&…

Java实现加权平均分计算程序WeightedAverageCalculator

成绩加权平均分计算程序,带UI界面和输入保存功能。 因为本人对成绩的加权均分有所关注,但学校的教务系统查分时往往又不显示个人的加权均分,加之每次手动敲计算器计算很麻烦就花了点时间写了一个加权均分计算程序自用,顺便开源。…

Go 的 Http 请求系统指南

文章目录 快速体验请求方法URL参数响应信息BodyStatusCodeHeaderEncoding 图片下载定制请求头复杂的POST请求表单提交提交文件 CookieClient 上设置 Cookie请求上设置 Cookie 重定向和请求历史超时设置总超时连接超时读取超时 请求代理错误处理总结 前几天在 “知乎想法” 谈到…

开源的API Gateway项目- Kong基于OpenResty(Nginx + Lua模块)

Kong 是一个在 Nginx 内运行的开源 API 网关和微服务抽象层。它是用于处理 API 流量的灵活、可扩展、可插入的工具。 Kong 提供了以下功能: 用户登录:Kong 提供了多种认证插件,像 JWT、OAuth 2.0 等,可以满足用户登录需求。Toke…

精要图示:园区金融数字化服务蓝图,以园区为支点推动信贷业务增长

作为企业集聚地,园区已然成为银行业夯实客群基础的重要切口,各大行陆续围绕园区场景创新金融产品,以期抢跑园区金融新赛道、把握新增量。 启信慧眼首推一站式【园区金融】数字化服务方案,该方案同时支持启信天元私有化部署&#x…

使用acme.sh 签发SSL证书

(Nginx) 使用acme.sh 签发SSL证书 背景: 域名服务商: 阿里云 SSL证书使用场景: Nginx ,Tomcat 安装acme.sh 国内由于墙的问题,建议用gitee的镜像库克隆 mkdir /usr/local/acme cd /usr/local/acme git clone https://gitee.com/neilpa…

【操作系统】实验九 写一个设备驱动程序

🕺作者: 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux 😘欢迎关注:👍点赞🙌收藏✍️留言 🏇码字不易,你的👍点赞🙌收藏❤️关注对我真的很重要&…

分享一个“产业级,开箱即用”的NLP自然语言处理工具

NLP的全称是Natuarl Language Processing,中文意思是自然语言处理,是人工智能领域的一个重要方向 自然语言处理(NLP)的一个最伟大的方面是跨越多个领域的计算研究,从人工智能到计算语言学的多个计算研究领域都在研究计…

Python基础(二十九、pymsql)

文章目录 一、安装pymysql库二、代码实践1.连接MySQL数据库2.创建表格3.插入数据4.查询数据5.更新数据6.删除数据 三、完整代码示例四、结论 使用Python的pymysql库可以实现数据存储,这是一种连接MySQL数据库的方式。在本篇文章中,将详细介绍如何使用pym…

SpringBoot 自定义Filter 提前返回 CORS 错误 处理前后端分离跨域配置无效问题解析

前言 浏览器有跨域限制,非同源策略 (协议、主机名或端口不同) 被视为跨域请求,解决跨域有跨域资源共享(CORS)、反向代理和 JSONP的方式。本篇通过 SpringBoot 的资源共享配置 (CORS) 来解决前后端分离项目的跨域,以及从原理上去解决跨域配置…

2023年NOC大赛(学而思赛道)创意编程Python初中组决赛真题

2023年NOC大赛(学而思赛道)创意编程Python初中组决赛真题 题目总数:7 总分数:100 编程题 第 1 题 问答题 二进制回文 编程实现: 输入一个正整数,判断它的二进制形式是否是回文数,如果是输出True…

web系统服务器监控检查

一、检查操作系统是否存在增减文件,是否有shell被上传 要检查操作系统是否存在增减文件或是否有shell被上传,您可以按照以下步骤进行操作: 文件完整性检查: 使用文件系统的完整性检查工具,例如fsck(对于ext…

Backtrader 文档学习-Order Management and Execution

Backtrader 文档学习-Order Management and Execution 本章提供了关于order的详细功能测试用例,很好很重要。 最后的示例部分,详细分析总结了不同参数的效果和输出。 如果不能模拟订单交易回测就不会完整。为此,平台中提供了以下功能&…

LLM之Agent(九)| 通过API集成赋能Autogen Multi-Agent系统

随着大型语言模型的快速发展,构建基于LLM驱动的自治代理(autonomous agents)已经成为一个备受关注的话题。仅在过去一年中,就出现了许多基于这一理念的新技术和框架。 ​ 本文将探索微软开源的Agent框架:Autogen…

幻兽帕鲁服务器搭建教程分享,小白有福了

如何自建幻兽帕鲁服务器?基于阿里云服务器搭建幻兽帕鲁palworld服务器教程来了,一看就懂系列。本文是利用OOS中幻兽帕鲁扩展程序来一键部署幻兽帕鲁服务器,阿里云百科aliyunbaike.com分享官方基于阿里云服务器快速创建幻兽帕鲁服务器教程&…

vue 样式隔离原理

日常写单文件组件时&#xff0c;会在style添加scoped属性&#xff0c;如<style scoped>&#xff0c;目的是为了隔离组件与组件之间的样式&#xff0c;如下面的例子&#xff1a; <template><p class"foo">这是foo</p><p class"bar&q…

【SpringCloud Nacos】 微服务治理介绍及Nacos引入初体验

文章目录 前言服务治理介绍什么是服务治理1、服务发现2、服务配置3、服务健康检测 常见的注册中心ZookeeperEurekaConsulNacos Nacos 简介Nacos 实战入门搭建nacos环境1、安装nacos2、配置nacos3、访问nacos 将商品微服务注册到 nacos1、在 pom. xml 中添加 nacos 的依赖2、在主…

华为机考入门python3--(0)测试题1-句子平均重量

分类&#xff1a;字符串 知识点&#xff1a; 获取输入 input().strip().split(" ") 拼接列表 " ".join(list) 输出指定位数的浮点数 print("%.2f" % value) len() 函数对于很多内置的数据类型都适用&#xff0c;它返回对象的元素个数或长度。…

Android App开发基础(3)——App的设计规范

3 App的设计规范 本节介绍了App工程的源码设计规范&#xff0c;首先App将看得见的界面设计与看不见的代码逻辑区分开&#xff0c;然后利用XML标记描绘应用界面&#xff0c;同时使用Java代码书写程序逻辑&#xff0c;从而形成App前后端分离的设计规约&#xff0c;有利于提高App集…

零基础学编程工具简介,中文编程开发工具

零基础学编程工具简介&#xff0c;中文编程开发工具 一、前言 零基础自学编程&#xff0c;中文编程工具下载&#xff0c;中文编程工具构件之扩展系统菜单构件教程 编程系统化教程链接https://jywxz.blog.csdn.net/article/details/134073098?spm1001.2014.3001.5502 给大家…