前端实现流文件下载

在现代Web开发中,经常会遇到需要从服务器下载文件的情况。有时候这些文件是事先存储好的,可以通过简单的URL链接直接下载;但有时候,我们需要从数据流中动态生成文件并将其提供给用户。本篇博客将介绍如何在前端实现流文件下载的完整指南。

了解流文件下载

流文件下载是一种在前端从数据流中动态生成文件并下载的方法。这对于一些特殊的场景非常有用,比如生成PDF文档、导出Excel表格或下载服务器端生成的图像等。

基本原理

在前端实现流文件下载的基本原理如下:

从服务器获取数据流。
将数据流转换成Blob对象。
创建一个URL指向该Blob对象。
创建一个a标签,设置其href属性为该URL,download属性为文件名。
模拟点击a标签,触发文件下载。
完成下载后,释放URL对象。
代码实现
下面是一段简单的JavaScript代码,实现了从数据流中下载文件的功能:

/*** data: 下载文件* fileName: 文件名* type: 下载文件类型*/
export function downloadHandler(data, fileName, type) {// 匹配任意文件类型:type : "application/octet-stream"const blob = new Blob([data], { type: type || 'application/octet-stream' });const downloadElement = document.createElement('a');const href = window.URL.createObjectURL(blob);downloadElement.href = href;downloadElement.download = fileName;document.body.appendChild(downloadElement);downloadElement.click();document.body.removeChild(downloadElement);window.URL.revokeObjectURL(href);
}

这段代码中,我们首先将数据流转换成Blob对象,然后创建一个a标签,设置其href属性为Blob对象的URL,download属性为文件名。接着将a标签添加到页面中,模拟点击a标签实现文件下载。下载完成后,移除a标签,并释放URL对象。

示例

假设我们有一个后端接口 /api/download,用于提供文件下载服务。我们可以使用fetch API从该接口获取数据流,并通过我们实现的downloadHandler函数实现文件下载。

fetch('/api/download').then(response => response.blob()).then(blob => {downloadHandler(blob, 'example.pdf', 'application/pdf');}).catch(error => {console.error('文件下载失败:', error);});

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

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

相关文章

MySQL8基于GTID以及VIP实现高可用主从架构

jdbc客户端配置高可用以及故障切换 jdbc客户端实现故障切换 MySQL Connector/J 支持服务器故障转移。当底层活动连接发生与连接相关的错误时,就会发生故障转移 参考官网地址 jdbc:mysql://[primary host][:port],[secondary host 1][:port] jdbc客户端实现故障切…

C# String

String字符串字面量字符串连接字符串是不可变的字符串比较字符串方法字符串插值字符串和字符数组字符串格式化空字符串和 null字符串的安全性正则表达式 注意String.Format基本语法参数 基本使用使用索引指定对齐和宽度使用格式字符串组合使用 总结 C# String 在C#中&#xff0…

vAttention:用于在没有Paged Attention的情况下Serving LLM

文章目录 0x0. 前言(太长不看版)0x1. 摘要0x2. 介绍&背景0x3. 使用PagedAttention模型的问题0x3.1 需要重写注意力kernel0x3.2 在服务框架中增加冗余0x3.3 性能开销0x3.3.1 GPU上的运行时开销0x3.3.2 CPU上的运行时开销 0x4. 对LLM服务系统的洞察0x5…

自动驾驶跟驰仿真

联合仿真需求分析报告 一、项目背景 随着汽车技术的快速发展,自动驾驶和智能网联汽车已成为行业发展的重要趋势。为确保自动驾驶车辆在复杂交通环境中的安全性和可靠性,进行联合仿真测试显得尤为重要。本报告旨在明确联合仿真的具体需求,为…

Springboot结合redis实现关注推送

关注推送 Feed流的模式 Timeline:不做内容筛选,简单的按照内容发布时间排序。常用于好友与关注。例如朋友圈的时间发布排序。 优点:信息全面,不会有缺失。并且实现也相对简单 缺点:信息噪音较多,用户不一定感兴趣,内容获取效率…

佳能5DMARK IV mov视频覆盖的恢复方法

5DMARK IV算是佳能比较经典的一款摄像机,是佳能早期使用MOV的摄像机之一,MOV是当初佳能高端机的象征,当然现在佳能已经不在通过MOV和MP4来区分硬件级别了。下边这个案例是文件拍摄时断电,结果变成0字节,然后覆盖了部分…

mysql实现json数据的解析

在MySQL中,你可以使用JSON函数来解析、查询和修改JSON数据。MySQL 5.7及更高版本提供了对JSON的原生支持。 以下是一些常用的JSON函数及其用法: JSON_EXTRACT(): 从JSON文档中提取数据。 sql SELECT JSON_EXTRACT({"name": "John"…

epoll 为什么能提高网络性能

epoll⾼性能最根本的原因是,epoll 可以同时监听多个fd事件,这在很⼤程度地减少了⽆⽤的进程上下⽂切换,让进程更专注地处理⽹络请求。 其实在内核的硬、软中断上下⽂中,包从⽹卡接收过来进⾏处理,然后放到socket的接 …

oc中类都是在main执行前,加载到内存中的,正确吗?

oc中类加载 在Objective-C中,类是在程序运行时(runtime)加载到内存中的,而不是在main函数执行前。 在Objective-C中,类的加载是由运行时系统负责的。当程序启动时,Objective-C运行时系统会自动加载所有…

速度位置规划实现精确定位的问题

🏆本文收录于「Bug调优」专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&…

论文略读:Onthe Expressivity Role of LayerNorm in Transformers’ Attention

ACL 2023 研究了LayerNorm在 Transformers 中对注意力的作用LayerNorm为Transformer的Attention提供了两个重要的功能: 投影,projection LayerNorm 帮助 Attention 设计一个注意力查询,这样所有的Key都可以平等地访问通过将Key向量投影到同一…

端午节到了,祝大家粽子甜甜,生活美满!愿粉丝们心想事成,健康平安,阖家幸福!

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …

素数不重模定理

结论 若对于正整数 a , b a,b a,b &#xff0c;其中 a , b a,b a,b 均为素数且 a ≠ b a \neq b ab&#xff0c; 则有 a k % b ( 1 ≤ k < b ) a^k\%b(1\le k<b) ak%b(1≤k<b) 这 k − 1 k-1 k−1 个数两两不同。 证明 不会

狭义人机交互与广义人机交互

人机交互&#xff08;HMI&#xff09;是指人与计算机之间的交互过程。狭义的人机交互主要关注人与计算机之间的界面设计和交互技术&#xff0c;注重用户与计算机系统之间的信息交换和控制。这种交互通常涉及图形用户界面&#xff08;GUI&#xff09;、鼠标、键盘等输入设备&…

Linux网络服务

01 Linux网络设置 02 DHCP原理与配置 03 DNS域名解析服务 04 远程访问及控制 05 部署YUM仓库及NFS共享服务 06 PXE高效批量网络装机

【Java基础】多线程开发

Java多线程编程学习笔记 Author: Jim.kk Video: Bilibili 文章目录 Java多线程编程学习笔记学习路线简介程序、进程与线程的关系JVM简介 | 多线程在JVM中的执行示例CPU 线程的调度方式多线程的意义并行与并发 创建多线程 1 | Thread 与 Runnable方式 1 | 继承 Thread 类方式 …

企业网站策划

企业网站策划是企业推广和宣传的重要组成部分&#xff0c;它不仅是企业对外传达形象和信息的平台&#xff0c;更是企业与客户、供应商、合作伙伴进行交流和互动的重要工具。好的企业网站策划不仅能够展示企业形象和产品信息&#xff0c;还能够为用户提供更好的体验&#xff0c;…

leetcode290:单词规律

题目链接&#xff1a;290. 单词规律 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:bool wordPattern(string pattern, string s) {unordered_map<char, string> s2t;unordered_map<string, char> t2s;int len pattern.size();int CountSpace…

Java:集合框架

1.Collection接口 collection接口是Java最基本的集合接口&#xff0c;它定义了一组允许重复的对象。它虽然不能直接创建实例&#xff0c;但是它派生了两个字接口List和Set&#xff0c;可以使用子接口的实现类创建实例。Collection 接口是抽取List接口和Set接口共同的存储特点和…

Eureka和Nacos有哪些区别?

Eureka和Nacos都能起到注册中心的作用&#xff0c;用法基本类似。但还是有一些区别的&#xff0c;例如&#xff1a; Nacos支持配置管理&#xff0c;而Eureka则不支持。 而且服务注册发现上也有区别&#xff0c;我们来做一个实验&#xff1a; 我们停止user-service服务&#x…