【前端下载文件流详解】前端实现多种类型文件（word,excel,pdf,rar,zip等）的下载,接口返回文件流形式（附源码）

news2024/9/22 13:25:14

【写在前面】其实之前我也写了有关java实现文件的下载，但是当时是局限于excel文档，针对其他类型的并没有介绍，这次刚好有个客户现场反馈回来的，说我们系统确实能下载报告，但是甲方领导要看所有的报告，这不我每天得一个一个的点击下载，然后再打包给他们领导，这能不能实现勾选多条数据，然后形成压缩包再进行下载？
既然都说这么多了，我能说不行么？

涉及知识点：前端下载返回乱码，前端调用接口返回文件流，压缩包rar下载，如何实现word打包下载，前端常见的多种文档下载请求，实现zip,rar,word,excel等多种文件前端下载，前端多个文件打包下载，MIME类型大全。

【皇榜】支持博主的可以一睹皇榜哟，等您上榜！

版权声明：原创于CSDN博主-拄杖盲学轻声码，有疑惑可去留言私信哟！

目录

  • 效果图
  • 1、前端文件下载
    • 1.1 前端下载文件5种方式
      • A、a标签方式
      • B、 location.href 方式
      • C、window.open方式
      • D、文件流方式
      • E、创建iframe标签form表单提交方式
    • 1.2 二进制流形式前端解析（附源码）
      • 1.2.1 返回乱码复现
      • 1.2.2 接收文件流前端源码
  • 2、MIME类型汇总
  • 3、彩蛋上皇榜

效果图

在这里插入图片描述

当然这次我们是站在前端角度去看哈，要想了解后端代码逻辑可以去看我之前java实现文件下载的文章。

1、前端文件下载

1.1 前端下载文件5种方式

A、a标签方式

适用于单个文件的下载，尤其是对文件名有特殊要求的，正常可以用下面两种方式：
直接在href：

 < a href="/images/download.jpg" download="myFileName">

主动创建并触发点击事件：

const aLink = document.createElement('a');
aLink.style.display = 'none';
 aLink.href = window.URL.createObjectURL(blob);
 aLink.download = '日检列表汇总.rar';
 document.body.appendChild(aLink);
 aLink.click();
 document.body.removeChild(aLink);

B、 location.href 方式

主要适用于不知道的文件格式，像图片，html,pdf等网页能识别的文件会直接打开

window.location.href = url

C、window.open方式

主要适用于不知道的文件格式，像图片，html,pdf等网页能识别的文件会直接打开

window.open(url)

D、文件流方式

传给前端的是流的形式，二进制的方式，前端显示的是一些黑色方框的乱码。这种方式支持多文件下载，post请求下载，自定义文件名等多种方式，下面1.2专门介绍。

E、创建iframe标签form表单提交方式

其实和a标签的第二种方式很像，一个是点击，一个是submit，如下所示：

var config = $.extend(true, {
    method: 'post'
}, options);
var $iframe = $('<iframe id="down-file-iframe" />');
var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
$form.attr('action', config.url);
for (var key in config.data) {
    $form.append('<input type="hidden" name="' + key + '" value="' + config.data[key] + '" />');
}
$iframe.append($form);
$(document.body).append($iframe);
$form[0].submit();
$iframe.remove();

1.2 二进制流形式前端解析（附源码）

1.2.1 返回乱码复现

首先给大家甩一个返回二进制字节流形式的万能的代码架子啊，关于流格式接口返回控制台如图所示：
在这里插入图片描述

1.2.2 接收文件流前端源码

解析流源码（rar文件下载为例）：

var _data = [];
var url = getContextPath()+"/joblog/batchDownloadDailyReport";
var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open("POST", url, true);
xhr.onload = function () {
    const blob = new Blob([this.response], {type:"application/x-rar-compressed"});
    if(blob.size < 1) {
        alert('导出失败，导出的内容为空！');
        return;
    }
    if(window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveOrOpenBlob(blob, 'test.rar')
    } else {
        const aLink = document.createElement('a');
        aLink.style.display = 'none';
        aLink.href = window.URL.createObjectURL(blob);
        aLink.download = '日检列表汇总.rar';
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink);
        return;
    }
}
xhr.setRequestHeader("Authorization", "xxx");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(_data));

其实核心点在于下面几点：
A、type为application/x-rar-compressed
B、创建a标签并主动触发a点击
C、xhr的send事件将传参塞到请求体里面。
基本上有这个方法大家就对文件流格式不用再害怕了。

2、MIME类型汇总

其实前端下载文件有很多种类，如下（按字母排序）：

扩展名文档类型MIME 类型
.aacAAC audioaudio/aac
.abwAbiWord documentapplication/x-abiword
.arcArchive document (multiple files embedded)application/x-freearc
.aviAVI: Audio VideoInterleave video/x-msvideo
.azwAmazon Kindle eBook formatapplication/vnd.amazon.ebook
.binAny kind of binary dataapplication/octet-stream
.bmpWindows OS/2 BitmapGraphics image/bmp
.bzBZip archiveapplication/x-bzip
.bz2BZip2 archiveapplication/x-bzip2
.cshC-Shell scriptapplication/x-csh
.cssCascading Style Sheets (CSS)text/css
.csvComma-separated values (CSV)text/csv
.docMicrosoft Wordapplication/msword
.docxMicrosoft Word (OpenXML)application/vnd.openxmlformats-officedocument.wordprocessingml.document
.eotMS Embedded OpenType fontsapplication/vnd.ms-fontobject
.epubElectronic publication (EPUB)application/epub+zip
.gifGraphics Interchange Format (GIF)image/gif
.htm .htmlHyperText Markup Language (HTML)text/html
.icoIcon formatimage/vnd.microsoft.icon
.icsiCalendar formattext/calendar
.jarJava Archive (JAR)application/java-archive
.jpeg .jpgJPEG imagesimage/jpeg
.jsJavaScripttext/javascript
.jsonJSON formatapplication/json
.jsonldJSON-LD formatapplication/ld+json
.mid .midiMusical Instrument Digital Interface (MIDI)audio/midi audio/x-midi
.mjsJavaScript moduletext/javascript
.mp3MP3 audioaudio/mpeg
.mpegMPEG Videovideo/mpeg
.mpkgApple Installer Packageapplication/vnd.apple.installer+xml
.odpOpenDocument presentation documentapplication/vnd.oasis.opendocument.presentation
.odsOpenDocument spreadsheet documentapplication/vnd.oasis.opendocument.spreadsheet
.odtOpenDocument text documentapplication/vnd.oasis.opendocument.text
.ogaOGG audioaudio/ogg
.ogvOGG videovideo/ogg
.ogxOGGapplication/ogg
.otfOpenType fontfont/otf
.pngPortable Network Graphicsimage/png
.pdfAdobe Portable Document Format (PDF)application/pdf
.pptMicrosoft PowerPointapplication/vnd.ms-powerpoint
.pptxMicrosoft PowerPoint (OpenXML)application/vnd.openxmlformats-officedocument.presentationml.presentation
.rarRAR archiveapplication/x-rar-compressed
.rtfRich Text Format (RTF)application/rtf
.shBourne shell scriptapplication/x-sh
.svgScalable Vector Graphics (SVG)image/svg+xml
.swfSmall web format (SWF) or Adobe Flash documentapplication/x-shockwave-flash
.tarTape Archive (TAR)application/x-tar
.tif .tiffTagged Image File Format (TIFF)image/tiff
.ttfTrueType Fontfont/ttf
.txtText, (generally ASCII or ISO 8859-n)text/plain
.vsdMicrosoft Visioapplication/vnd.visio
.wavWaveform Audio Formataudio/wav
.webaWEBM audioaudio/webm
.webmWEBM videovideo/webm
.webpWEBP imageimage/webp
.woffWeb Open Font Format (WOFF)font/woff
.woff2Web Open Font Format (WOFF)font/woff2
.xhtmlXHTMLapplication/xhtml+xml
.xlsMicrosoft Excelapplication/vnd.ms-excel
.xlsxMicrosoft Excel (OpenXML)application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xmlXMLapplication/xml 代码对普通用户来说不可读 (RFC 3023, section 3) text/xml 代码对普通用户来说可读 (RFC 3023, section 3)
.xulXULapplication/vnd.mozilla.xul+xml
.zipZIP archiveapplication/zip
.3gp3GPP audio/video containervideo/3gpp audio/3gpp（若不含视频）
.3g23GPP2 audio/video containervideo/3gpp2 audio/3gpp2（若不含视频）
.7z7-zip archiveapplication/x-7z-compressed

版权声明：原创于CSDN博主-拄杖盲学轻声码，有疑惑可去留言私信哟！

3、彩蛋上皇榜

倾心打造佳作，愿解君之惑，如若有幸，盼君上榜助阵，特此敬谢！
皇榜入口点击此处

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【持续升级】Vue3 系统入门与项目实战无密分享闻郎江上唱歌声

【持续升级】Vue3 系统入门与项目实战无密分享闻郎江上唱歌声

Vue3 系统入门指南&#xff1a;开发高效、可维护的Web应用 【持续升级】Vue3 系统入门与项目实战 下栽のke呈&#xff1a;https://www.666xit.com/3811/ Vue.js是目前最流行的JavaScript框架之一&#xff0c;它的最新版本Vue3已经发布。Vue3具有更好的性能和可维护性&#x…
阅读更多...
HNU数据结构与算法分析-小班6

HNU数据结构与算法分析-小班6

HNU数据结构与算法分析-小班6
阅读更多...
一文带你入门MySQL

一文带你入门MySQL

目录 一、MySQL登陆1.配置MySQL环境变量2.MySQL登陆命令 二、MySQL基础知识1.数据类型&#xff08;1&#xff09;整型&#xff08;2&#xff09;浮点型&#xff08;3&#xff09;日期型&#xff08;4&#xff09;字符型&#xff08;5&#xff09;数据类型小结 2.MySQL的约束【重…
阅读更多...
​力扣解法汇总1105. 填充书架

​力扣解法汇总1105. 填充书架

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣 描述&#xff1a; 给定一个数组 books &#xff0c;其中 books[i] [thicknessi, heighti] 表示第…
阅读更多...
【c语言习题】return中途结束 函数调用

【c语言习题】return中途结束 函数调用

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ…
阅读更多...
王道计组(23版)6_总线

王道计组(23版)6_总线

总线概述 特点 分时&#xff1a;同一时刻只允许一个部件向总线发送信息 共享&#xff1a;总线上可以挂接多个部件&#xff0c;各个部件互相交换的信息都可以通过这组线路分时共享&#xff0c;多个部件可以同时从总线接收相同的信息 分类 片内总线&#xff1a;CPU芯片内部AL…
阅读更多...
如何实现延时任务（订单到期关闭）

如何实现延时任务（订单到期关闭）

目录 一、被动关闭 二、定时任务 三、JDK自带的DelayQueue 四、Netty的时间轮 五、Kafka的时间轮 六、RocketMQ延迟消息 七、RabbitMQ死信队列 八、RabbitMQ插件 九、Redis过期监听 十、Redis的zset 十一、Redisson Redis 总结 在电商、支付等系统中&#xff0c;…
阅读更多...
【某软件消息的加解密分析】

【某软件消息的加解密分析】

首先来熟悉一下ida的使用。 首先找到打开ida&#xff0c;点击"debugger"-> “run” -> “local windows debugger"后&#xff0c;从Application中找到程序并点击"ok”&#xff0c;程序停在入口处。 因为我们要调试的是接收数据包的加解密过程&…
阅读更多...
MIT6.S081操作系统实验2021（xv6系统）——lab1 Xv6 and Unix utilities

MIT6.S081操作系统实验2021（xv6系统）——lab1 Xv6 and Unix utilities

MIT6.S081操作系统实验2021——lab1 参考文章 sleep 要求为xv6实现UNIX 程序sleep&#xff1b;其应该暂停用户指定的ticks number。tick是 xv6 内核定义的时间概念&#xff0c;即计时器芯片的两次中断之间的时间&#xff08;两次时钟中断之间的时间&#xff09;。您的解决方…
阅读更多...
从服务员到高级测试工程师，我的坎坷之路谁又能懂

从服务员到高级测试工程师，我的坎坷之路谁又能懂

首先要感谢那些嘲讽我代码写的烂的人&#xff0c;五年开发经验嘲笑刚出校门踏入社会的我&#xff0c;让我放弃了开发工作&#xff0c;走向测试的康庄大道。此外&#xff0c;曾经的开发经验对我测试工作的帮助是无与伦比的。数据库&#xff0c;编程语言&#xff0c;liunx&#x…
阅读更多...
Linux驱动开发——高级I/O操作（五）

Linux驱动开发——高级I/O操作（五）

目录 mmap设备文件操作 定位操作 习题 mmap设备文件操作 显卡一类的设备有一片很大的显存&#xff0c;驱动程序将这片显存映射到内核的地址空间&#xff0c;方便进行操作。如果用户想要在屏幕上进行绘制操作&#xff0c;将要在用户空间开辟出一片至少一样大的内存&#xff…
阅读更多...
Python学习之DateTime、TimeDelta、Strftime(Format)及其示例

Python学习之DateTime、TimeDelta、Strftime(Format)及其示例

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤1.引入库2.使用date.today()打印日期3.Python当前日期和时间&#xff1a;now() today()总结 4.如何使用 Strftime()格式化日期和时间输出1. 首先&#xff0c;我们将看到一个简单的如何格式化年份的步骤。通过一个例子来理…
阅读更多...
使用buildroot编译完整系统【IMX6ULLPRO】

使用buildroot编译完整系统【IMX6ULLPRO】

目录 构建 IMX6ULL Pro 版的根文件系统 编译系统 ​编辑 镜像文件 构建 IMX6ULL Pro 版的根文件系统 配置文件说明 编译系统 下面以 100ask_imx6ull_pro_ddr512m_systemV_qt5_defconfig 配置文 件为例&#xff0c;在 ubuntu 终端上说明 Buildroot 的配置过程&#x…
阅读更多...
玩转ChatGPT：辅助编程

玩转ChatGPT：辅助编程

一、写在前面 首先让小Chat介绍自己在编程方面的天赋&#xff1a; 总结起来&#xff1a;TA掌握了海量的编程知识&#xff0c;能做到自动代码生成、代码审查优化、编程教学辅导以及实时问题解答。我问TA学习了多少案例&#xff0c;TA说&#xff1a;忘了&#xff0c;但保证够用。…
阅读更多...
OpenCV-手势语言识别

OpenCV-手势语言识别

OpenCV-手势语言识别 OpenCV-手势语言识别Python环境、TensorFlow环境设置直方图模型保存set_hand_hist.py相关代码如下&#xff1a;载入手势图片 OpenCV-手势语言识别 本部分包括Python环境、TensorFlow环境和OpenCV-Python环境。 Python环境、TensorFlow环境 需要Python 3…
阅读更多...
Spring Boot-入门、热部署、配置文件、静态资源

Spring Boot-入门、热部署、配置文件、静态资源

Spring Boot Spring Boot概述 一、微服务概述 1、微服务 微服务&#xff08;Microservices&#xff09;是一种软件架构风格。微服务是以专注单一责任与功能的小型功能区块 &#xff08;Small Building Blocks&#xff09;为基础&#xff1b;利用模块化的方式组合出复杂的大…
阅读更多...
DockerImage镜像版本说明

DockerImage镜像版本说明

参考文章 1、https://medium.com/swlh/alpine-slim-stretch-buster-jessie-bullseye-bookworm-what-are-the-differences-in-docker-62171ed4531d 2、https://stackoverflow.com/questions/52083380/in-docker-image-names-what-is-the-difference-between-alpine-jessie-stret…
阅读更多...
顺序表 和 链表 的区别

顺序表 和 链表 的区别

顺序表 基于数组 就是对数组进行相关的操作 进行存储数据 数组有个很大的缺点就是 可能会产生内存浪费 针对数组这一缺点 就产生了链表 链表顾名思义 就是像链条一样将数据串起来 链表是将内存中的小空间利用起来 让内存的利用率提高 但是也产生了很大的缺点 就是不能随…
阅读更多...
数据通信基础 - 差错控制（奇偶校验、海明码、CRC循环冗余校验码）

数据通信基础 - 差错控制（奇偶校验、海明码、CRC循环冗余校验码）

文章目录 1 概述1.1 检错和纠错1.2 差错控制原理 2 差错控制的方法2.1 奇偶校验2.2 海明码2.3 CRC循环冗余校验码 3 扩展3.1 网工软考真题 1 概述 1.1 检错和纠错 无论通信系统如何可靠&#xff0c;都不能做到完美无缺。因此&#xff0c;必须考虑怎样发现和纠正信号传输中的差…
阅读更多...
【实用教程】教你制作好看的论文区位图

【实用教程】教你制作好看的论文区位图

区位图是反映目标区所在位置和与周边地区自然、经济相互作用关系的体现区位的地图。好的区位图能为论文打好专业的基调&#xff0c;给读者留下更好观感&#xff0c;是科研论文不可或缺的一部分。 层次&#xff1a;面向国际期刊的区位图一定要从国际角度出发&#xff0c;清楚表示…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023