当前位置: 首页 > news >正文

前端 JS 经典:文件流下载

重点:调用接口时,一定要配置 responseType 的值为 blob,不然获取的文件流,不会转义成 blob 类型的文件。

1. 接口返回文件流

// BLOB (binary large object)----二进制大对象,是一个可以存储二进制文件的容器
// 下载接口:重点responseType: "blob"
// 返回体 res blob 文件流
function downloadFile(params) {return api({url: "/download/file",method: "get",params,responseType: "blob",});
}

2. 文件流下载:简单版

/*** 下载函数* @param {string} data - 后端获取的文件流* @param {string} name - 文件名*/
function downloadFile(data, name) {const blob = new Blob([data]);const url = window.URL.createObjectURL(blob);const a = document.createElement("a");a.href = url;a.download = name;document.body.appendChild(a);a.style.display = "none";a.click();document.body.removeChild(a);
}

3. 文件流下载:豪华版

/*** 全面优化下载函数*/
function downloadFile(res) {// 判断是否接口调用是否正常返回文件流const r = new FileReader();r.readAsText(res.data);r.onload = () => {try {// 报错,未返回const resData = JSON.parse(r.result);} catch (err) {// 正常,开始转换文件流// 正常情况,浏览器不返回字段为 content-disposition 的请求头,需要后端特殊声明下,才拿得到const name = res.headers["content-disposition"];const fileName = name.split("=")[1];// 解码filename = decodeURIComponent(fileName);// 兼容ie11if (window.navigator.msSaveOrOpenBlob) {try {const blobObject = new Blob([res.data]);window.navigator.msSaveOrOpenBlob(blobObject, fileName);} catch (e) {console.log(e);}return;}// a标签实现下载const url = window.URL.createObjectURL(new Blob([res.data]));const a = document.createElement("a");a.style.display = "none";a.href = url;a.download = filename;document.body.appendChild(a);a.click();resolve(fileName);document.body.removeChild(a);}};
}

相关文章:

前端 JS 经典:文件流下载

重点:调用接口时,一定要配置 responseType 的值为 blob,不然获取的文件流,不会转义成 blob 类型的文件。 1. 接口返回文件流 // BLOB (binary large object)----二进制大对象,是一个可以存储二进制文件的容器 // 下载…...

SSL免费证书会报安全提示吗?

安全性是互联网世界中至关重要的一环,其中一个关键组成部分就是SSL证书,它们用于加密在用户浏览器和服务器之间传输的数据,以确保数据的保密性和完整性。然而,有关SSL证书的一个常见问题是:免费SSL证书是否会触发安全警…...

为什么要选择Spring cloud Sentinel

为什么要选择Spring cloud Sentinel 🍎对比Hystrix🍂雪崩问题及解决方案🍂雪崩问题🍂.超时处理🍂仓壁模式🍂断路器🍂限流🍂总结 🍎对比Hystrix 在SpringCloud当中支持多…...

第八天:gec6818arm开发板和Ubuntu中安装并且编译移植mysql驱动连接QT执行程序

一、Ubuntu18.04中安装并且编译移植mysql驱动程序连接qt执行程序 1 、安装Mysql sudo apt-get install mysql-serverapt-get isntall mysql-clientsudo apt-get install libmysqlclient-d2、查看是否安装成功,即查看MySQL版本 mysql --version 3、MySQL启动…...

使用JavaScript实现图片的自动轮播

介绍 在网站开发中,经常会遇到需要展示多张图片并自动切换的需求,这就需要使用JavaScript来实现图片的自动轮播功能。本文将通过一个简单的例子,演示如何用JavaScript实现图片的自动轮播。 实现步骤: HTML结构: 首先…...

React 如何拿时间戳计算得到开始和结束时间戳

获取需要的时间戳(开始 and 结束时间戳) 调用如下方法就行: function getWantTimestamp(props) {//当前时间const nowDate parseInt((new Date().getTime() / 1000).toString()); //当前时间switch (props) {// 当前时间时间戳case "nowData": {return n…...

leetcode114 二叉树展开为链表

题目 给你二叉树的根结点 root ,请你将它展开为一个单链表: 展开后的单链表应该同样使用 TreeNode ,其中 right 子指针指向链表中下一个结点,而左子指针始终为 null 。 展开后的单链表应该与二叉树 先序遍历 顺序相同。 示例 输…...

Linux系统上使用SQLite

1. 安装SQLite 在Linux上安装SQLite非常简单。可以使用包管理器(如apt、yum)直接从官方软件源安装SQLite。例如,在Ubuntu上使用以下命令安装SQLite: sudo apt-get install sqlite32. 打开或创建数据库 要打开或创建一个SQLite数…...

实现一个超级简单的string类(基于c++)

简单的string仅仅需要构造函数&#xff0c;拷贝构造,移动构造和移动赋值&#xff0c;operator&#xff0c;析构函数等。如下&#xff1a; #include<iostream> #include<assert.h> using namespace std; namespace qyy {class string{public:friend ostream& …...

uniapp存值和取值,获取登录凭证 code方法

Uniapp 的存值和取值 Uniapp 的存值和取值方法可以使用Vue.js的数据绑定方式&#xff0c;也可以使用uni.setStorageSync() 和 uni.getStorageSync() 方法。 使用Vue.js的数据绑定方式&#xff1a; 在Vue组件中定义一个data属性&#xff0c;然后将需要存储的值赋给该属性。例…...

【SpringCloud微服务全家桶学习笔记-服务调用Ribbon/openFeign】

SpringCloud微服务全家桶学习笔记 内容&#xff1a;SpringCloud SpringCloud alibaba 技术栈&#xff1a;Java8mavengit&#xff0c;githubNginxRabbitMQSpringBoot2.0 仓库&#xff1a;链接 服务调用Ribbon 是什么&#xff1f; Ribbon是Netflix发布的开源项目&#xff…...

Qt使用I.MX6U开发板上的按键(原理:将电脑键盘方向键↓在Qt中的枚举值与开发板中按键定义的枚举值一致,这样电脑端测试效果就与开发板的一致)

在上篇介绍了Qt点亮I.MX6U开发板的一个LED&#xff0c;对于Qt控制I.MX6U开发板的一个蜂鸣器原理也是一样的&#xff0c;就不做详细介绍&#xff0c;具体可参考Qt控制I.MX6U开发板的一个蜂鸣器&#xff0c;本篇介绍Qt使用I.MX6U开发板上的按键的相关内容。 文章目录 1. 开发板硬…...

C++ RAII在HotSpot VM中的重要应用

RAII&#xff08;Resource Acquisition Is Initialization&#xff09;&#xff0c;也称为“资源获取就是初始化”&#xff0c;是C语言的一种管理资源、避免泄漏的惯用法。C标准保证任何情况下&#xff0c;已构造的对象最终会销毁&#xff0c;即它的析构函数最终会被调用。简单…...

python随手小练

题目&#xff1a; 使用python做一个简单的英雄联盟商城登录界面 具体操作&#xff1a; print("英雄联盟商城登录界面") print("~ * "*15 "~") #找其规律 a "1、用户登录" b "2、新用户注册" c "3、退出系统&quo…...

MySQL——函数和流程控制

2023.9.21 函数 含义&#xff1a;一组预先编译好的SQL语句的集合&#xff0c;理解成批处理语句。 提高代码的重用性简化操作减少了编译次数并且减少了和数据库服务器的连接次数&#xff0c;提高了效率 与存储过程的区别&#xff1a; 存储过程&#xff1a;可以有0个返回&am…...

【Vue3 源码讲解】nextTick

nextTick 是 Vue 3 中用于异步执行回调函数的函数&#xff0c;它会将回调函数延迟到下一个微任务队列中执行。其中&#xff0c;Vue 更新 DOM 是异步的。下面是对 nextTick 函数的详细解释&#xff1a; export function nextTick<T void, R void>(this: T,fn?: (this:…...

什么是ATR,在聚宽量化平台如何计算ATR

海龟们使用两种资金管理方法。首先&#xff0c;我们把头寸分成一个个小块。这样&#xff0c;即使一笔交易赔了钱&#xff0c;我们损失的也只是一个头寸的一部分。里奇和比尔把这些小块称作头寸单位。其次&#xff0c;我们使用里奇和比尔发明的一种创新性的头寸规模决定方法。这…...

Python 爬虫实战之爬淘宝商品并做数据分析

前言 是这样的&#xff0c;之前接了一个金主的单子&#xff0c;他想在淘宝开个小鱼零食的网店&#xff0c;想对目前这个市场上的商品做一些分析&#xff0c;本来手动去做统计和分析也是可以的&#xff0c;这些信息都是对外展示的&#xff0c;只是手动比较麻烦&#xff0c;所以…...

Python爬虫-requests.exceptions.SSLError: HTTPSConnectionPool疑难杂症解决(1)

前言 本文是该专栏的第7篇,后面会持续分享python爬虫案例干货,记得关注。 在爬虫项目开发中,偶尔可能会遇到SSL验证问题“requests.exceptions.SSLError: HTTPSConnectionPool(host=www.xxxxxx.com, port=443): Max retries exceeded with url ...”。亦或是验证之后的提示…...

12:STM32---RTC实时时钟

目录 一:时间相关 1:Unix时间戳 2: UTC/GMT 3:时间戳转化 二:BKP 1:简历 2:基本结构 三: RTC 1:简历 2: 框图 3:RTC基本结构 4:RTC操作注意 四:案例 A:读写备份寄存器 1:连接图 2: 步骤 3: 代码 B:实时时钟 1:连接图 2:函数介绍 3:代码 一:时间相关 1:Un…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...