【前端下载文件流详解】前端实现多种类型文件（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 = $('<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类型汇总

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

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

3、彩蛋上皇榜

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