原生JS通过XMLHttpRequest请求文件流下载文件时获取文件名称

背景:后台请求文件接口返回的是文件流Stream,可是不知道怎么获取这个文件流文件的名字;在swagger或者postman中请求接口时,文件名称也是乱码

解决 :

1. 使用XMLHttpRequest去请求文件流,并在页面导出

2. 在XMLHttpRequest请求的响应结果中需要判断响应是否是希望获得的文件类型

3. 通过查看XMLHttpRequest的响应内容时,发现是有文件名称的,可以通过正则等一系列寻找找出来

4. 将流对象创建成下载链接,并将文件名称赋值到download上

5. 模拟点击链接,下载文件,这样下载下来的文件名称也是后台给这个文件命名的名字了

//以导出pdf为例
function downloadFile (id) {var xhr = new XMLHttpRequest();var formData = new FormData();//添加请求文件时的请求参数formData.append('id', id);xhr.open("post", '/api/xxx/GetFile', true);//xhr.setRequestHeader('token', localStorage.token);xhr.send(formData);xhr.responseType = "blob";xhr.onload = function () {if (this.status == 200) {var filename = '';var blob = this.response;var response_type = xhr.response.type;if (response_type.indexOf('pdf') < 0) {var reader = new FileReader();reader.onload = function (event) {var content = event.target.result;alert('返回内容不是pdf')};reader.readAsText(blob);} else {//获取pdf文件名称var disposition = decodeURIComponent(xhr.getResponseHeader('Content-Disposition'));if (disposition && disposition.indexOf('attachment') !== -1) {var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;var matches = filenameRegex.exec(disposition);if (matches != null && matches[1]) {filename = matches[1].replace(/['"]/g, '');}}var downloadElement = document.createElement('a');var href = window.URL.createObjectURL(blob); //创建下载的链接downloadElement.href = href;downloadElement.download = filename || 'report'; //下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); //点击下载document.body.removeChild(downloadElement); //下载完成移除元素window.URL.revokeObjectURL(href); //释放掉blob对象}} else {alert('下载失败');}};
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue 文件预览

<template><div><p>打开新页面预览文件</p><div v-for"(item,index) in list" :key"index"><el-link type"primary" click"handleOpen(item.url)">{{item.name}}</el-link></div><…

【问题】 STM32 从 BOOT 跳转 APP 后运行失败的解决方案贴搜集

解决贴 关于STM32的BootLoader应用程序后不能正常跳转的问题总结 关于使用STM32F103C8T6的boot升级程序时&#xff0c;跳转到APP一直进入HardFault_Handler的问题解决 IAP升级跳转APP卡死&#xff0c;全网最巧妙解决方案 STM32H7 bootloader 跳转到APP后死机问题 Keil MDK…

rocky9上安装Harbor私有仓库

环境 rocky9 minimal 安装docker 配置阿里云的docker源 yum install -y yum-utils device-mapper-persistent-data lvm2 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 指定安装这个版本的docker-ce yum list docker-…

spring 中的控制反转

在Spring框架中&#xff0c;控制反转&#xff08;IoC&#xff0c;Inversion of Control&#xff09;是指将对象的创建和管理交给了容器&#xff0c;而不是在应用程序代码中直接创建对象。在传统的编程模式中&#xff0c;应用程序代码通常负责创建对象并管理它们的生命周期&…

物联网SaaS平台

在信息化、智能化浪潮席卷全球的今天&#xff0c;物联网SaaS平台作为推动工业数字化转型的重要工具&#xff0c;正日益受到广泛关注。那么&#xff0c;物联网SaaS平台究竟是什么&#xff1f;HiWoo Cloud作为物联网SaaS平台又有哪些独特优势&#xff1f;更重要的是&#xff0c;它…

【原型设计】用Axure进行数据大屏可视化设计,民政数据可视化大屏

数据已经成为推动社会进步和提高政府治理能力的重要资源。民政数据大屏作为一种直观的数据展示平台,为我们提供了一个全面了解社会服务状况的窗口。通过民政数据大屏,我们可以实时监控和分析各项民政服务的运行情况,从而更好地满足人民群众的需求,提高社会福利水平。 两项…

Golang 基于共享变量的并发锁

一、互斥锁 先看一个并发情况&#xff0c;同时操作一个全局变量&#xff0c;如果没有锁会怎么样 假设有1000个goroutines并发进行银行余额的扣除&#xff0c;每次都扣除10元&#xff0c;起始的总余额是10000&#xff0c;理论上并发执行完应该是0对不对&#xff0c;但实际却不…

spring04:注解使用

spring04&#xff1a;注解使用 文章目录 spring04&#xff1a;注解使用前言&#xff1a;一、 Autowired Qualifier和 Resource 和 nullable1. Autowired 2. Resource &#xff1a;使用在类的属性上面&#xff08;和Autowired类似&#xff09;3. nullable 二、 Component 和 Re…

统信UOS桌面操作系统1060上隐藏Windows磁盘

原文链接&#xff1a;统信UOS桌面操作系统1060上隐藏Windows磁盘 Hello&#xff0c;大家好啊&#xff01;继之前我们讨论了如何在统信UOS桌面操作系统1060上安装双系统之后&#xff0c;今天我要给大家介绍的是&#xff0c;在这个基础上如何隐藏Windows磁盘分区。这样做可以让你…

MySQL数据库基础二

1m1.数据完整性约束 1.1主键约束 基本语法&#xff1a; 字段名称 数据类型 PRIMARY KEY例&#xff1a; 创建数据表student&#xff0c;并设置字段sno作为主键 CREATE TABLE student(sno char(12)RPIMARY KEY,sname varchar(50),sgender varchar(10),sage int(10),sdept var…

大数据dolphinscheduler 本地容器化安装

Minio 容器安装 docker run -p 9000:9000 -p 9090:9090 --name minio -d -e "MINIO_ACCESS_KEYminioadmin" -e "MINIO_SECRET_KEYminioadmin" -v D:\SF\DOCKER\minio\data:/data -v D:\SF\DOCKER\minio\config:/root/.minio minio/minio server /da…

特别详细的Spring Cloud 系列教程2:微服务网关gateway的启动

继上一篇&#xff1a;特别详细的Spring Cloud 系列教程1&#xff1a;服务注册中心Eureka的启动 在比较多的教程和书籍里&#xff0c;spring cloud的微服务网关用的Zuul。然而&#xff0c;zuul已经不被官方提倡&#xff0c;现在提倡用的是spring cloud gateway。因为gateway的整…

WPS二次开发系列:Gradle版本、AGP插件与Java版本的对应关系

背景 最近有体验SDK的同学反馈接入SDK出现报错&#xff0c;最终定位到原因为接入的宿主app项目的gradle版本过低导致&#xff0c;SDK兼容支持了android11的特性&#xff0c;需要对应的gradle插件为支持android11的版本。 现象 解决方案 将gradle版本升级至支持android11的插件版…

海外代理IP如何助力YouTube广告投放?

一、海外代理的角色与优势 拓展地理访问&#xff1a; 海外代理允许您从其他国家或地区的IP地址进行网络访问。通过使用海外代理&#xff0c;您可以绕过部分限制&#xff0c;实现访问YouTube和其他平台的目的。扩展受众&#xff1a; 利用海外代理&#xff0c;您可以将广告投放面…

【学习】Spring IoCDI

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 Spring 是什么&#xff1f; 什么是 IoC容器&#xff1f; 传统开发模式 loC开发模式 IoC的优势 IoC 的使用 Bean的…

vue3使用jsQR解析二维码

1.了解jsQR jsQR是一个纯javascript脚本实现的二维码识别库&#xff0c;不仅可以在浏览器端使用&#xff0c;而且支持后端node.js环境。jsQR使用较为简单&#xff0c;有着不错的识别率。 2.效果图 3.二维码 4.下载jsqr包 npm i -d jsqr5.代码 <script setup> import …

迁移docker部署的GitLab

目录 1. 背景2. 参考3. 环境4. 过程4.1 查看原docker启动命令4.2 打包挂载目录传至新宿主机并创建对应目录4.3 保存镜像并传至新宿主机下4.4 新宿主机启动GitLab容器 5 故障5.1 容器不断重启5.2 权限拒绝5.3 容器内错误日志 6 重启容器服务正常7 总结 1. 背景 最近接到一个任务…

iOS自定义初始化方法

有很多初始化方法我们通常都是在applicationDidFinishLaunching里一个个调用&#xff0c;那么有没有办法像__attribute__((constructor))&#xff0c;能够自动调用被修饰的函数&#xff1f; 可以通过指定函数所在section的方式&#xff0c;然后获取section开头去逐个调用。但是…

【Java】JDK1.8 HashMap源码,put源码详细讲解

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 在Java中&#xff0c;HashMap结构是被经常使用的&#xff0c;在面试当中也是经常会被问到的。这篇文章我给大家分享一下我对于HashMap结构源码的理解。 HashMap的存储与一般的数组不同&#xff0c;HashMap的每一个元素存…

第 9 场 小白入门赛 -- 蓝桥杯

比赛地址 第 9 场 小白入门赛 - 蓝桥云课 1 . 省赛总动员 #include <iostream> using namespace std; int main() {// 请在此输入您的代码cout << "No.1" << endl ;return 0; } 2 . 盖印章 解方程即可&#xff0c;因为题目确定有解 #include…