Blob对象实现文件下载

首先,要有下载按钮

<a download onClick={()=> downloadAttentment(data)}>下载</a>

其次,定义下载function

// 此处去处理 blob 对象
const downloadStreamByATag = (data, suffix, name) => {if (suffix === void 0) { suffix = 'xls'; }if (name === void 0) { name = '导出文件'; }if (data.type) {var blob = new Blob([data]);var fileName = name + "." + suffix;if ('download' in document.createElement('a')) { // 非IE下载var elink = document.createElement('a');elink.download = fileName;elink.style.display = 'none';elink.href = URL.createObjectURL(blob);document.body.appendChild(elink);elink.click();URL.revokeObjectURL(elink.href); // 释放URL 对象document.body.removeChild(elink);}}
}// 发送请求
const downloadAttentment = (data)=> {return axios.post(url, data).then((res)=> {downloadStreamByATag(res 'xls', '名单') })
}
Blob

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。

在这里插入图片描述

Blob() 构造函数返回一个新的 Blob 对象。blob 的内容由参数 array 中给出的值串联而成

new Blob(array, options)

参数
options[可选] 一个可以指定以下任意属性的对象:

  • type 可选,MIME类型 默认值是空字符(“”)。
  • endings 可选,非标准 默认值 transparent 会将换行符复制到 blob 中而不会改变它们。要将换行符转换为主机系统的本地约定,请指定值 native。
URL.createObjectURL()

URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。

参数 object
用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。

返回值
一个DOMString包含了一个对象 URL,该 URL 可用于指定源 object的内容。

URL.revokeObjectURL()

URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用URL.createObjectURL() 创建的 URL 对象。
当你结束使用某个 URL 对象之后,应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。

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

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

相关文章

Python数据结构与算法(1):将序列分解为单独的变量

问题 现在有一个包含 N 个元素的元组或者是序列&#xff0c;怎样将它里面的值解压后同时赋值给 N 个变量&#xff1f; 解决方案 任何的序列&#xff08;或者是可迭代对象&#xff09;可以通过一个简单的赋值操作来分解为单独的变量。 唯一的要求就是变量的总数和结构必须与序…

JAVASE 数组相关知识

递归 A方法调用B方法&#xff0c;我们很容易理解 递归就是:A方法调用A方法&#xff0c;即自己调用自己 利用递归可以用简单的程序来解决一些复杂的问题。它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解&#xff0c;递归策略只需少量的程序就可…

一个人可能代表一群人

最近有个小伙伴问他是做货代的&#xff0c;怎么能找到自己的客户&#xff1f;刚看到这个问题的时候&#xff0c;觉得这个不属于自己的范围&#xff0c;因为自己不是做货代的&#xff0c;怎么知道他们怎么工作&#xff0c;怎么去搜索客户呢&#xff1f; 但是仔细想来&#xff0…

【Java EE】日志框架(SLF4J)与门面模式

文章目录 &#x1f340;SLF4j&#x1f333;门面模式(外观模式)&#x1f338;门面模式的定义&#x1f338;门面模式的模拟实现&#x1f338;门面模式的优点 &#x1f332;关于SLF4J框架&#x1f338;引入日志门面 ⭕总结 &#x1f340;SLF4j SLF4J不同于其他⽇志框架,它不是⼀个…

跟TED演讲学英文:AI isn‘t as smart as you think -- but it could be by Jeff Dean

AI isn’t as smart as you think – but it could be Link: https://www.ted.com/talks/jeff_dean_ai_isn_t_as_smart_as_you_think_but_it_could_be Speaker: Jeff Dean Jeffrey Adgate “Jeff” Dean (born July 23, 1968) is an American computer scientist and software…

【服务器部署篇】Linux下快速安装Jenkins

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0c;产…

微前端micro-app 子应用 调用父应用方法

参考&#xff1a;micro-app官方文档 场景描述 父应用存储一套vuex数据&#xff0c;其中包含登录信息token等&#xff0c;登录信息透传给子应用使用。 当子应用中的接口返回“登录失效”时&#xff0c;需要清空父应用vuex中的登录相关信息&#xff0c;并且跳转到登录页面。 原…

网站建设企业网站优化

近年来&#xff0c;随着互联网的迅速发展&#xff0c;企业网站已经成为了企业展示自我形象与实力的重要载体之一。然而&#xff0c;单单拥有一个美观、简洁的企业网站并不能让企业在竞争激烈的市场中脱颖而出。因此&#xff0c;在建设企业网站的过程中&#xff0c;我们需要将企…

【前端】对象的常用处理函数(深浅拷贝)

前言 浅拷贝会创建一个新对象&#xff0c;但只复制了原始对象的第一层属性&#xff0c;而不是递归地复制整个对象的所有嵌套属性。因此&#xff0c;新对象中的嵌套对象仍然是原始对象中嵌套对象的引用。这意味着修改新对象中的嵌套对象会影响原始对象中的相应嵌套对象 深拷贝…

C++常用的输入输出方法(ACM模式)

文章目录 前言一、输入输出方法1、cin2、getline()3、getchar() 二、算法案例1、一维数组1.1 输入固定长度1.2长度不固定 2、固定二维数组3、以非空格隔开的元素输入3、常见数据结构定义以及输入3.1 链表 前言 C中的输入输出函数有很多&#xff0c;我们本章只针对大部分算法题…

上位机图像处理和嵌入式模块部署(树莓派4b开机界面程序自启动)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们学习了如何在树莓派4b上面开发qt&#xff0c;也学习了如何用/etc/rc.local启动控制台程序&#xff0c;那今天我们继续学习一下如何利用树莓…

docker compose安装redis

一、安装准备 在docker hub查看redis镜像版本。查看地址如下&#xff1a; Dockerhttps://hub-stage.docker.com/_/redis/tags 二、拉取docker镜像 我这里用redis:6.2.14版本&#xff0c;先拉取镜像。命令如下&#xff1a; docker pull redis:6.2.14 查看刚刚下载的镜像&am…

链表的从尾到头打印(递归)

目录 链表的从尾到头打印&#xff08;递归&#xff09; 链表的从尾到头打印&#xff08;递归&#xff09; 递归打印链表 #include <bits/stdc.h> using namespace std;void coutls(list<int>::iterator iter, list<int>::iterator node_end){if (iter!node…

[python数据处理系列] 深入理解与实践基于聚类的过采样与欠采样技术:以K-Means为例

目录 一、过采样介绍 (一)什么是过采样 (二)过采样的优点 (三)过采样的缺点 二、欠采样介绍 (一)什么是欠采样 (二)欠采样的优点 (三)欠采样的缺点 三、基于聚类的欠抽样方法(K-Means欠采样/KMeans-Undersampling) (一)KMeans欠采样原理及其步骤介绍 (二)为什么不采…

clickhouse学习笔记05

ClickHouseSpringBoot2.XMybatisPlus整合搭建 添加需要的依赖&#xff1a; 添加clickhouse依赖&#xff1a; 配置数据库配置&#xff1a; 我们框架就搭建完了。 ClickHouse的项目案例统计需求讲解 ClickHouse的项目案例统计库表和数据准备 添加数据&#xff1a; 数据都插入进来…

js逆向进阶篇-某团酒店

提示!本文章仅供学习交流,严禁用于任何商业和非法用途,未经许可禁止转载,禁止任何修改后二次传播,擅自使用本文讲解的技术而导致的任何意外,作者均不负责,如有侵权,可联系本文作者删除! 案例分析: 先来看看请求中有哪些参数是需要我们逆向,如下: mtgsig、fp、roh…

ERROR: [7df2405] missing Change-Id in commit message footer

git push origin HEAD:refs/for/[分支名] 使用“git push origin HEAD:refs/for/[分支名]”,报错信息见下图 报错信息:ERROR: [7df2405] missing Change-Id in commit message footer 解决办法 根据git的提示依次执行下面的语句即可 第一步:输入下面的语句,下载一个 g…

Java---数据类型与变量

1.字面常量 字面常量就是我们经常所说的常量&#xff0c;常量即在程序运行期间&#xff0c;固定不变的量。且常量是无法改变的&#xff0c;如果我们的代码有改变常量的操作&#xff0c;程序就会报错。 1.1字面常量的分类 字符串常量&#xff0c;整型常量&#xff0c;浮点数常…

FileLink内外网文件摆渡系统产品介绍

在现代企业中&#xff0c;往往存在着多个网络、系统之间的数据孤岛问题&#xff0c;数据难以互相访问和共享。 一、常用的内外网文件摆渡方式 传统的数据交换方式往往需要人工介入&#xff0c;效率低下且容易出错。如&#xff1a;U盘、FTP、VPN等&#xff0c;极易引发各种各样…

Mysql事务—隔离级别—脏读、不可重复读、幻读-遥遥领先版

事务的基本概念 事务就是一组原子性的操作&#xff0c;这些操作要么全部发生&#xff0c;要么全部不发生。事务把数据库从一种一致性状态转换成另一种一致性状态。 事务最经典也经常被拿出来说例子就是转账了。 假如小明要给小红转账1000元&#xff0c;这个转账会涉及到两个…