js实现文件下载

185 阅读5分钟

一、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标签下载

<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.pdf
			input.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);如果是其他格式就认为文件流已经返回。
  • this.getResponseHeader('content-disposition')
    后端返回的文件名称,主要获取后缀名,否则某些浏览器会一律识别为txt,导致下载下来的都是txt
  • new Blob([this.response], {type: '文件类型'})Application Type 对照表
    1.Blob.type一个字符串,表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知,则该值为空字符串;
    2.对于pdf:type为application/pdf 同时 a标签 不设置download属性(图6-3), 可以直接预览
  • axios中其实已经提供了获取文件上传和下载进度的事件,这里我使用的是原生ajax(axios雷同,只需要修改请求方法)。

优点

  • 可以下载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可以用下这个,但是每个浏览器允许下载的最大文件不一样~
  • ajax下载
    如果后端需要对下载接口做token鉴权,此时需要使用ajax获取文件流(第六、七点),可以了解下ajax文件下载原理
    简单来说,文件下载依赖浏览器特性。前端获取到服务器端生成的字节流,此时数据是存在于js的内存中的,是不可以直接保存在本地的,利用Blob对象和window.URL.createObjectURL对象生成一个虚拟的URL地址,然后在利用浏览器的特性进行下载。
    因此对于ajax下载大文件时,会出现浏览器崩溃情况,此时可以考虑使用链接直接下载或使用分片下载
  • 链接下载
    链接下载需要后端一边去下载要打包的文件,一边把打包好的东西写入这个链接。存在的问题是,如果文件很大,那么这个链接需要一直保持,相当于这个接口一直开着没有结束;而且一旦中间出了什么问题,已经下载的东西也全部废了,因此推荐使用分片下载
  • 分片下载

要实现文件下载并分片下载,可以使用 JavaScript 的 Fetch API 和 Blob API。以下是实现的步骤:

  1. 创建一个 XMLHttpRequest 对象,以便从服务器获取文件的大小,以便划分文件的分块。
  2. 使用 Fetch API 获取文件的每个分块,并将其存储在 Blob 对象中。
  3. 使用 Blob API 将每个 Blob 对象保存为一个文件块,并将它们保存到本地磁盘上的一个目录中。
  4. 合并所有的文件块为一个完整的文件。

以下是 JavaScript 代码的示例:

const chunkSize = 1024 * 1024; // 1MB
const url = 'http://example.com/largefile.zip';

// 获取文件的大小
const xhr = new XMLHttpRequest();
xhr.open('HEAD', url, false);
xhr.send();
const fileSize = xhr.getResponseHeader('Content-Length');

// 分块下载文件
let start = 0;
let end = chunkSize;
while (start < fileSize) {
  const blob = await fetch(`${url}?start=${start}&end=${end}`).then(res => res.blob());

  // 保存文件块到本地磁盘
  const file = new File([blob], `part-${start}-${end}.zip`, { type: blob.type });
  saveAs(file);

  // 更新分块的起始位置和结束位置
  start = end + 1;
  end += chunkSize;
  if (end > fileSize) {
    end = fileSize;
  }
}

// 合并所有的文件块为一个完整的文件
const parts = [];
for (let i = 0; i < fileSize / chunkSize; i++) {
  const part = await fetch(`part-${i * chunkSize}-${(i + 1) * chunkSize - 1}.zip`).then(res => res.blob());
  parts.push(part);
}
const fullBlob = new Blob(parts);
const fullFile = new File([fullBlob], 'largefile.zip', { type: fullBlob.type });
saveAs(fullFile);

在上面的代码中,fetch 方法用于获取文件的每个分块,并将其存储在 Blob 对象中。saveAs 方法用于将 Blob 对象保存为一个文件块,并将其保存到本地磁盘上的一个目录中。File 对象表示一个文件块或完整文件。Blob 对象用于在客户端上存储二进制数据,例如文件或图像。saveAs 方法是第三方库 FileSaver.js 提供的,用于将 Blob 对象保存为一个文件。

最后,为了合并所有的文件块为一个完整的文件,我们使用 Blob API 创建一个 Blob 对象,然后将其保存为一个完整的文件。