当前位置: 首页 > 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…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...