js实现文件下载有很多种方式，本文主要介绍7种。

一、a标签下载

<body><button onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">a标签下载</button><script>function downloadEvt(url, fileName = '未知文件') {const el = document.createElement('a');el.style.display = 'none';el.setAttribute('target', '_blank');/*** download的属性是HTML5新增的属性* href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。* 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式* 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)*/fileName && el.setAttribute('download', fileName);el.href = url;console.log(el);document.body.appendChild(el);el.click();document.body.removeChild(el);}</script>
</body>

优点：

可以下载txt、png、pdf等类型文件
download的属性是HTML5新增的属性 href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式；所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)

缺点：

a标签只能做get请求，所有url有长度限制
无法获取下载进度
无法在header中携带token做鉴权操作
跨域限制
无法判断接口是否返回成功
IE兼容问题

二、form标签下载

图2-1

<body><button onclick="inputDownloadEvt('get', 'http://192.168.66.183:13666/download', 'name', 'HAP.pdf')">form标签下载</button><script>/*** @param {String} method - 请求方法get/post* @param {String} url* @param {String} paramsKey - 请求参数名* @param {String} paramsValue - 请求参数值*/function inputDownloadEvt(method, url, paramsKey, paramsValue) {const form = document.createElement('form');form.style.display = 'none';form.setAttribute('target', '_blank');form.setAttribute('method', method);form.setAttribute('action', url);const input = document.createElement('input');input.setAttribute('type','hidden');// 对于get请求 最终会拼成http://192.168.66.183:13666/download?name=HAP.pdfinput.setAttribute('name', paramsKey);input.setAttribute('value', paramsValue);form.appendChild(input);document.body.appendChild(form);form.submit();document.body.removeChild(form);}</script>
</body>

优点

兼容性好，不会出现URL长度限制问题
form标签get和post都可以

缺点

无法获取下载进度
无法在header中携带token做鉴权操作
无法直接下载浏览器可直接预览的文件类型（txt、png、pdf会直接预览）
无法判断接口是否返回成功

三、window.open下载

<body><button onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">window.open下载</button><script>function downloadEvt(url) {window.open(url, '_self');}</script></body>

优点

简单方便直接

缺点

会出现URL长度限制问题
需要注意url编码问题
无法获取下载进度
无法在header中携带token做鉴权操作
无法直接下载浏览器可直接预览的文件类型（txt、png、pdf会直接预览）
无法判断接口是否返回成功

四、iframe下载

<body><button onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">iframe下载</button><script>// 批量下载时，动态创建a标签，会始终只下载一个文件，改为动态创建iframe标签function downloadEvt(url) {const iframe = document.createElement('iframe');iframe.style.display = 'none';iframe.src = url;document.body.appendChild(iframe);setTimeout(() => {document.body.removeChild(iframe);}, 200);}</script></body>

优点

可以下载txt、png、pdf等类型文件

缺点

无法获取下载进度
无法在header中携带token做鉴权操作
无法判断接口是否返回成功
兼容、性能差

五、location.href下载

<body><button onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">location.href下载</button><script>function downloadEvt(url) {window.location.href = url;}</script>
</body>

优点

简单方便直接
可以下载大文件(G以上)

缺点

会出现URL长度限制问题
需要注意url编码问题
无法获取下载进度
无法在header中携带token做鉴权操作
无法直接下载浏览器可直接预览的文件类型（txt、png、pdf会直接预览）
无法判断接口是否返回成功

六、ajax下载（`Blob - 利用Blob对象生成Blob URL`）

如果后端需要做token验证，那么a、form、iframe、window.open、location.href都无法在header中携带token，这时候可以使用ajax来实现。

<body><button onclick="downLoadAjaxEvt('get', 'http://192.168.66.183:13666/download?name=HAP.pdf')">ajax下载</button><script>function downloadEvt(url, fileName = '未知文件') {const el = document.createElement('a');el.style.display = 'none';el.setAttribute('target', '_blank');/*** download的属性是HTML5新增的属性* href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。* 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式* 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)*/fileName && el.setAttribute('download', fileName);el.href = url;console.log(el);document.body.appendChild(el);el.click();document.body.removeChild(el);};
// 根据header里的contenteType转换请求参数function transformRequestData(contentType, requestData) {requestData = requestData || {};if (contentType.includes('application/x-www-form-urlencoded')) {// formData格式：key1=value1&key2=value2，方式二：qs.stringify(requestData, {arrayFormat: 'brackets'}) -- {arrayFormat: 'brackets'}是对于数组参数的处理let str = '';for (const key in requestData) {if (Object.prototype.hasOwnProperty.call(requestData, key)) {str += `${key}=${requestData[key]}&`;}}return encodeURI(str.slice(0, str.length - 1));} else if (contentType.includes('multipart/form-data')) {const formData = new FormData();for (const key in requestData) {const files = requestData[key];// 判断是否是文件流const isFile = files ? files.constructor === FileList || (files.constructor === Array && files[0].constructor === File) : false;if (isFile) {for (let i = 0; i < files.length; i++) {formData.append(key, files[i]);}} else {formData.append(key, files);}}return formData;}// json字符串{key: value}return Object.keys(requestData).length ? JSON.stringify(requestData) : '';}/*** ajax实现文件下载、获取文件下载进度* @param {String} method - 请求方法get/post* @param {String} url* @param {Object} [params] - 请求参数，{name: '文件下载'}* @param {Object} [config] - 方法配置*/function downLoadAjaxEvt(method = 'get', url, params, config) {const _method = method.toUpperCase();const _config = Object.assign({contentType: _method === 'GET' ? 'application/x-www-form-urlencoded' : 'application/json',  // 请求头类型fileName: '未知文件',                                        // 下载文件名(必填，若为空，下载下来都是txt格式)async: true,                                                // 请求是否异步-true异步、false同步token: 'token'                                              // 用户token}, config);
const queryParams = transformRequestData(_config.contentType, params);const _url = `${url}${_method === 'GET' && queryParams ? '?' + queryParams : ''}`;
const ajax = new XMLHttpRequest();ajax.open(_method, _url, _config.async);ajax.setRequestHeader('Authorization', _config.token);ajax.setRequestHeader('Content-Type', _config.contentType);// responseType若不设置，会导致下载的文件可能打不开ajax.responseType = 'blob';// 获取文件下载进度ajax.addEventListener('progress', (progress) => {const percentage = ((progress.loaded / progress.total) * 100).toFixed(2);const msg = `下载进度 ${percentage}%...`;console.log(msg);});ajax.onload = function () {if (this.status === 200 || this.status === 304) {// 通过FileReader去判断接口返回是json还是文件流const fileReader = new FileReader();fileReader.onloadend = (e) => {if (this.getResponseHeader('content-type').includes('application/json')) {const result = JSON.parse(fileReader.result || '{message: 服务器出现问题，请联系管理员}');alert(result.message);} else {// 两种解码方式，区别自行百度: decodeURIComponent/decodeURI（主要获取后缀名，否则低版本浏览器会一律识别为txt，导致下载下来的都是txt）const _fileName = decodeURIComponent((this.getResponseHeader('content-disposition') || '; filename="未知文件"').split(';')[1].trim().slice(9));/*** Blob.type一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。* 对于pdf：type为application/pdf  同时 a标签 不设置download属性, 可以直接预览*/const blob = new Blob([this.response]);const href = URL.createObjectURL(blob);downloadEvt(href, _fileName);// 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象URL.revokeObjectURL(href);}};// 调用readAsText读取文件，少了readAsText将不会触发onloadend事件fileReader.readAsText(this.response);} else {alert('服务器出现问题，请联系管理员');}};// send(string): string：仅用于 POST 请求ajax.send(queryParams);}</script>
</body>

responseType responseType若不设置，会导致下载的文件可能打不开ajax.responseType = 'blob';
new FileReader() 1.文件下载的接口存在返回失败的情况（例如：服务器连接不上、接口报错等），对于下载失败的情况我们需要在页面上弹出失败提示，而不是将失败信息写进文件里等用户打开，这时候可以使用FileReader去根据响应头里的content-type判断接口是否返回成功； 2.如果content-type返回application/json表示文件流返回失败，此时直接在页面上弹出失败信息（图6-1）；如果是其他格式就认为文件流已经返回。

图6-1
this.getResponseHeader('content-disposition') 后端返回的文件名称，主要获取后缀名，否则某些浏览器会一律识别为txt，导致下载下来的都是txt

图6-2
new Blob([this.response], {type: '文件类型'}) Application Type 对照表 1.Blob.type一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串； 2.对于pdf：type为application/pdf 同时 a标签不设置download属性(图6-3), 可以直接预览（图6-4）

图6-3

图6-4
axios中其实已经提供了获取文件上传和下载进度的事件，这里我使用的是原生ajax（axios雷同，只需要修改请求方法）。

图6-5

优点

可以下载txt、png、pdf等类型文件
可以在header中携带token做鉴权操作
可以获取文件下载进度
可以判断接口是否返回成功

缺点

兼容性问题，IE10以下不可用，注意Safari浏览器,官网给出 Safari has a serious issue with blobs that are of the type application/octet-stream
将后端返回的文件流全部获取后才会下载

七、ajax下载（`Data URL - base64编码后的url`）

<body><button onclick="downLoadAjaxEvt('get', 'http://192.168.66.183:13666/download?name=HAP.pdf')">ajax下载(base64)</button><script>function downloadEvt(url, fileName = '未知文件') {const el = document.createElement('a');el.style.display = 'none';el.setAttribute('target', '_blank');/*** download的属性是HTML5新增的属性* href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。* 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式* 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)*/fileName && el.setAttribute('download', fileName);el.href = url;console.log(el);document.body.appendChild(el);el.click();document.body.removeChild(el);};
// 根据header里的contenteType转换请求参数function transformRequestData(contentType, requestData) {requestData = requestData || {};if (contentType.includes('application/x-www-form-urlencoded')) {// formData格式：key1=value1&key2=value2，方式二：qs.stringify(requestData, {arrayFormat: 'brackets'}) -- {arrayFormat: 'brackets'}是对于数组参数的处理let str = '';for (const key in requestData) {if (Object.prototype.hasOwnProperty.call(requestData, key)) {str += `${key}=${requestData[key]}&`;}}return encodeURI(str.slice(0, str.length - 1));} else if (contentType.includes('multipart/form-data')) {const formData = new FormData();for (const key in requestData) {const files = requestData[key];// 判断是否是文件流const isFile = files ? files.constructor === FileList || (files.constructor === Array && files[0].constructor === File) : false;if (isFile) {for (let i = 0; i < files.length; i++) {formData.append(key, files[i]);}} else {formData.append(key, files);}}return formData;}// json字符串{key: value}return Object.keys(requestData).length ? JSON.stringify(requestData) : '';}/*** ajax实现文件下载、获取文件下载进度* @param {String} method - 请求方法get/post* @param {String} url* @param {Object} [params] - 请求参数，{name: '文件下载'}* @param {Object} [config] - 方法配置*/function downLoadAjaxEvt(method = 'get', url, params, config) {const _method = method.toUpperCase();const _config = Object.assign({contentType: _method === 'GET' ? 'application/x-www-form-urlencoded' : 'application/json',  // 请求头类型fileName: '未知文件',                                       // 下载文件名(必填，若为空，下载下来都是txt格式)async: true,                                               // 请求是否异步-true异步、false同步token: 'token'                                             // 用户token}, config);
const queryParams = transformRequestData(_config.contentType, params);const _url = `${url}${_method === 'GET' && queryParams ? '?' + queryParams : ''}`;
const ajax = new XMLHttpRequest();ajax.open(_method, _url, _config.async);ajax.setRequestHeader('Authorization', _config.token);ajax.setRequestHeader('Content-Type', _config.contentType);// responseType若不设置，会导致下载的文件可能打不开ajax.responseType = 'blob';// 获取文件下载进度ajax.addEventListener('progress', (progress) => {const percentage = ((progress.loaded / progress.total) * 100).toFixed(2);const msg = `下载进度 ${percentage}%...`;console.log(msg);});ajax.onload = function () {if (this.status === 200 || this.status === 304) {// 通过FileReader去判断接口返回是json还是文件流const fileReader = new FileReader();fileReader.readAsDataURL(this.response);fileReader.onload = () => {if (this.getResponseHeader('content-type').includes('application/json')) {alert('服务器出现问题，请联系管理员');} else {// 两种解码方式，区别自行百度: decodeURIComponent/decodeURI（主要获取后缀名，否则某些浏览器会一律识别为txt，导致下载下来的都是txt）const _fileName = decodeURIComponent((this.getResponseHeader('content-disposition') || '; filename="未知文件"').split(';')[1].trim().slice(9));// 也可以用FileSaver（需提前引入https://github.com/eligrey/FileSaver.js）: saveAs(fileReader.result, _fileName);downloadEvt(fileReader.result, _fileName);}}} else {alert('服务器出现问题，请联系管理员');}};// send(string): string：仅用于 POST 请求ajax.send(queryParams);}</script>
</body>

fileSaver 网上介绍很多，可以自己百度下

优点

可以下载txt、png、pdf等类型文件
可以在header中携带token做鉴权操作
可以获取文件下载进度
可以判断接口是否返回成功

缺点

兼容性问题，IE10以下不可用
将后端返回的文件流全部获取后才会下载

八、大文件下载注意点

fileSaver 批量下载时，总量不超过2G可以用下这个，但是每个浏览器允许下载的最大文件不一样~

图8-1
ajax下载如果后端需要对下载接口做token鉴权，此时需要使用ajax获取文件流（第六、七点），可以了解下ajax文件下载原理。简单来说，文件下载依赖浏览器特性。前端获取到服务器端生成的字节流，此时数据是存在于js的内存中的，是不可以直接保存在本地的，利用Blob对象和window.URL.createObjectURL对象生成一个虚拟的URL地址，然后在利用浏览器的特性进行下载。因此对于ajax下载大文件时，会出现浏览器崩溃情况，此时可以考虑使用链接直接下载或使用分片下载

图8-2
链接下载链接下载需要后端一边去下载要打包的文件，一边把打包好的东西写入这个链接。存在的问题是，如果文件很大，那么这个链接需要一直保持，相当于这个接口一直开着没有结束；而且一旦中间出了什么问题，已经下载的东西也全部废了，因此推荐使用分片下载。

js实现文件下载有很多种方式，本文主要介绍7种。相关推荐

创业有很多种方式，方法，而且是形式多样
创业有很多种方式,方法,而且是形式多样,商品的多样化,多元化,造就了市场的千变万化.普通人创业可能相对简单容易,但是负债者创业却绝非易事. 很多人都在创业,有开店的,摆摊的,有做自媒体的,等等.每个领 ...
js小学生图区_多种方式实现js图片预览
js多种方式图片预览-持续更新 //设置自己的变量存储区 var Util = { file : $("#file"), image_show:$("#img_show& ...
【JS】——数组拼接的多种方式包括ES6写法
1. 前言很多时候的我们需要进行数组的拼接,再此就整理了js的数组多种拼接方式. 2. 数据准备需要拼接的数组,简单例子 let num = [1,2,3]; let numTemp = [3,3 ...
jquery跟js初始化加载的多种方法及区别介绍
jquery是等待页面加载完数据,以及页面部分元素:js是页面全部加载完成才执行初始化加载,具体示例祥看本文 jquery和js初始化加载页面的区别: jquery:等待页面加载完数据,以及页面部分 ...
类型多种_五轴机床有很多种类型，你知道几种？
五轴加工(5 Axis Machining),顾名思义,数控机床加工的一种模式.采用X.Y.Z.A.B.C中任意5个坐标的线性插补运动,五轴加工所采用的机床通常称为五轴机床或五轴加工中心.可是你真的了 ...
JS常用的输出内容的方式详解（5种输出方式）
1.alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符串然后在输出的 2.doc ...
vue引用js文件的多种方式
本文主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1.vue-cli webpack全局引入jquery (1) 首先 npm inst ...
vue引用js文件的多种方式(推荐)
vue引用js文件的多种方式(推荐) Day_by_day93 这篇文章主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1.vue-cli ...
Java判断字符串是否为数字的多种方式，你用对了吗
前言判断一个字符串是否为数字是Java开发中很常见的业务需求,实现这个判断有很多种方式,大体上分为异常处理,正则表达式,数字字符,NumberFormat工具类,外部工具类这五大类,不同类型下的实现 ...
用Vue来实现图片上传多种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务 ...

js实现文件下载有很多种方式，本文主要介绍7种。

二、form标签下载

三、window.open下载

四、iframe下载

五、location.href下载

六、ajax下载（`Blob - 利用Blob对象生成Blob URL`）

七、ajax下载（`Data URL - base64编码后的url`）

八、大文件下载注意点

js实现文件下载有很多种方式，本文主要介绍7种。相关推荐

最新文章

热门文章

js实现文件下载有很多种方式，本文主要介绍7种。

二、form标签下载

三、window.open下载

四、iframe下载

五、location.href下载

六、ajax下载（Blob - 利用Blob对象生成Blob URL）

七、ajax下载（Data URL - base64编码后的url）

八、大文件下载注意点

js实现文件下载有很多种方式，本文主要介绍7种。相关推荐

最新文章

热门文章

六、ajax下载（`Blob - 利用Blob对象生成Blob URL`）

七、ajax下载（`Data URL - base64编码后的url`）