【写在前面】其实之前我也写了有关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 = $('