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

最新推荐文章于 2024-08-23 16:32:02 发布
最新推荐文章于 2024-08-23 16:32:02 发布
阅读量4.5k 收藏 21
点赞数 1
分类专栏： # web_前端开发系列 # web_自定义封装 文章标签： 前端 word excel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hdp134793/article/details/130294016
版权

【写在前面】其实之前我也写了有关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类型汇总

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

扩展名文档类型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、彩蛋上皇榜

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

IT黄大大
关注
专栏目录
前端下载文件
ganghaodream的博客
03-03 487
//悬浮窗gzgzgzggzgzgzgzggzgzgzgzgzgzgzg window.onload=function(){ //写 var oneInner = document.createElement_x("div"); oneInner.se...
js 导出 （兼容IE）
夜惊如水
09-04 538
if (typeof window.navigator.msSaveBlob !== 'undefined') { window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls') }else{ let url = window.URL.createObjectURL(new Blob([data],{type: 'appl...
关于后台数据文件流的下载及导出
最新发布
weixin_50559423的博客
08-23 475
这些方法可以根据具体的需求和项目环境选择使用。需要注意的是，后端返回的文件流需要正确设置Content-Disposition响应头，以指定文件的名称和下载方式。当需要请求相关接口或者是 url 时，后端返回文件流的形式供前端下载，导出。以上8种实现下载的方式，根据不同的需求选择不同的方式。
前端下载文件流
weixin_小白鼠的博客
06-26 7021
这种方式不能在下载时名命文件，需要后端设置文件名 二、a标签下载 a标签的download属性，ie浏览器是不支持的请求的时候记得加responseType为blob,不然下载后点开是空白文件前端可以对文件名命 如果我们要使用后端返回的文件名（一般都在content-disposition中） blob、MIME相关补充 基本语法blob表示二进制大对象（binary larget object）,是js对不可修改的二进制数据的封装类型，主要用于存储二进制大对象,例如可以存储图片,音视频等文件;它的数据可以
前端文件流下载
m0_55005710的博客
06-27 219
vue文件流下载封装
前端实现流文件下载
小李在努力学习
06-10 1487
在现代Web开发中，经常会遇到需要从服务器下载文件的情况。有时候这些文件是事先存储好的，可以通过简单的URL链接直接下载；但有时候，我们需要从数据流中动态生成文件并将其提供给用户。本篇博客将介绍如何在前端实现流文件下载的完整指南。
前端下载二进制流文件
分享我的编程经验和学习心得
07-29 9673
更多文章 平时在前端下载文件有两种方式，一种是后台提供一个 URL，然后用 window.open(URL) 下载，另一种就是后台直接返回文件的二进制内容，然后前端转化一下再下载。 由于第一种方式比较简单，在此不再叙述。接下来主要讲解一下第二种方式怎么实现。 Blob、ajax(axios) mdn 上是这样介绍 Blob 的： Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示...
前端下载文件流文件
emmmmmmm__的博客
07-07 170
【代码】前端下载文件流文件。
前端下载数据流文件
weixin_43704691的博客
02-25 931
接口配置 export function exportEmployeeList (data) { return post(`${baseUrl}staff/excel`, data, { headers: { 'Content-Type': 'application/json' }, responseType: 'blob' }) } 转化文件 exportEmployeeList({ mainDepartmentIds: mainDepartmentId, .
前端解析文件流
Baby_加油_的博客
01-15 916
前端解析文件流
关于文件流的下载
m0_54239379的博客
03-04 596
前端无法进行解码获取到正确文件名，这通常是因为前后端字符编码不一致，需要后端用url转码处理一下，此时获取到的文件名为filename="Excel-%E7%90%86%E6%83%B3L9%E6%AD%A3%E5%BC%8F%E7%89%88SKU%E6%A8%A1%E7%89%88-20240110103630.xlsx"；1. 有时是动态文档，此时后端会返回一个文件流，此时前端需要做一些特殊处理进行下载并获取文件名。此方法可以给给的下载链接或文件下载模版自定义设置名字并避免文件名中空格乱码。
前端如何下载文件流
汤圆学Java
10-22 1667
点击上方蓝色“汤圆学Java”，选择“设为星标”点击菜单栏“激活码”，获取IDEA最新激活码，持续更新！前言 如果后台返回的是文件地址，那么前端直接通过 window.location.href 加文件地址，就可以下载文件；但是如果后台返回的是文件流，那么前端就需要做一些处理；其实前端处理的核心：就是将文件流转为文件，然后再模拟点击，实现前者的效果。步骤 1. 封装一个下载工具这个工具的作用就是，将获取的文件流转为文件，并模拟点击该文件，实现下载先贴代码，download.js（可直接复制使用）export
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT黄大大

有您的支持我将毕尽一生精力为您

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值