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

目录

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

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

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

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

效果图

当然这次我们是站在前端角度去看哈,要想了解后端代码逻辑可以去看我之前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 = $('