a标签下载
devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：我家小花儿 | 2024-02-06 17:09:10

赞

踩

js下载文件

 一、a标签下载

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

优点：

  • 可以下载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

  1. <body>
  2.   <button onclick="inputDownloadEvt('get', 'http://192.168.66.183:13666/download', 'name', 'HAP.pdf')">form标签下载</button>
  3.   <script>
  4.     /**
  5.      * @param {String} method - 请求方法get/post
  6.      * @param {String} url
  7.      * @param {String} paramsKey - 请求参数名
  8.      * @param {String} paramsValue - 请求参数值
  9.     */
  10.     function inputDownloadEvt(method, url, paramsKey, paramsValue) {
  11.       const form = document.createElement('form');
  12.       form.style.display = 'none';
  13.       form.setAttribute('target', '_blank');
  14.       form.setAttribute('method', method);
  15.       form.setAttribute('action', url);
  16.       const input = document.createElement('input');
  17.       input.setAttribute('type','hidden');
  18.       // 对于get请求 最终会拼成http://192.168.66.183:13666/download?name=HAP.pdf
  19.       input.setAttribute('name', paramsKey);
  20.       input.setAttribute('value', paramsValue);
  21.       form.appendChild(input);
  22.       document.body.appendChild(form);
  23.       form.submit();
  24.       document.body.removeChild(form);
  25.     }
  26.   </script>
  27. </body>
优点

  • 兼容性好，不会出现URL长度限制问题

  • form标签get和post都可以

缺点

  • 无法获取下载进度

  • 无法在header中携带token做鉴权操作

  • 无法直接下载浏览器可直接预览的文件类型（txt、png、pdf会直接预览）

  • 无法判断接口是否返回成功

三、window.open下载

  1. <body>
  2.   <button 
  3.     onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">
  4.     window.open下载
  5.   </button>
  6.  
  7.   <script>
  8.     function downloadEvt(url) {
  9.       window.open(url, '_self');
  10.     }
  11.   </script>
  12.  
  13. </body>
  14. ​

优点

  • 简单方便直接

缺点

  • 会出现URL长度限制问题

  • 需要注意url编码问题

  • 无法获取下载进度

  • 无法在header中携带token做鉴权操作

  • 无法直接下载浏览器可直接预览的文件类型（txt、png、pdf会直接预览）

  • 无法判断接口是否返回成功

四、iframe下载

  1. <body>
  2.   <button 
  3.     onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">
  4.     iframe下载
  5.   </button>
  6.  
  7.   <script>
  8.     // 批量下载时，动态创建a标签，会始终只下载一个文件，改为动态创建iframe标签
  9.     function downloadEvt(url) {
  10.       const iframe = document.createElement('iframe');
  11.       iframe.style.display = 'none';
  12.       iframe.src = url;
  13.       document.body.appendChild(iframe);
  14.       setTimeout(() => {
  15.         document.body.removeChild(iframe);
  16.       }, 200);
  17.     }
  18.   </script>
  19.  
  20. </body>
  21. ​

优点

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

缺点

  • 无法获取下载进度

  • 无法在header中携带token做鉴权操作

  • 无法判断接口是否返回成功

  • 兼容、性能差

五、location.href下载

  1. <body>
  2.   <button 
  3.     onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">
  4.     location.href下载
  5.   </button>
  6.  
  7.   <script>
  8.     function downloadEvt(url) {
  9.       window.location.href = url;
  10.     }
  11.   </script>
  12. </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来实现。

  1. <body>
  2.   <button onclick="downLoadAjaxEvt('get', 'http://192.168.66.183:13666/download?name=HAP.pdf')">ajax下载</button>
  3.   <script>
  4.     function downloadEvt(url, fileName = '未知文件') {
  5.       const el = document.createElement('a');
  6.       el.style.display = 'none';
  7.       el.setAttribute('target', '_blank');
  8.      /**
  9.        * download的属性是HTML5新增的属性
  10.        * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
  11.        * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
  12.        * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
  13.        */
  14.       fileName && el.setAttribute('download', fileName);
  15.       el.href = url;
  16.       console.log(el);
  17.       document.body.appendChild(el);
  18.       el.click();
  19.       document.body.removeChild(el);
  20.     };
  21. ​
  22.     // 根据header里的contenteType转换请求参数
  23.     function transformRequestData(contentType, requestData) {
  24.       requestData = requestData || {};
  25.       if (contentType.includes('application/x-www-form-urlencoded')) {
  26.         // formData格式：key1=value1&key2=value2，方式二：qs.stringify(requestData, {arrayFormat: 'brackets'}) -- {arrayFormat: 'brackets'}是对于数组参数的处理
  27.         let str = '';
  28.         for (const key in requestData) {
  29.           if (Object.prototype.hasOwnProperty.call(requestData, key)) {
  30.             str += `${key}=${requestData[key]}&`;
  31.           }
  32.         }
  33.         return encodeURI(str.slice(0, str.length - 1));
  34.       } else if (contentType.includes('multipart/form-data')) {
  35.         const formData = new FormData();
  36.         for (const key in requestData) {
  37.           const files = requestData[key];
  38.           // 判断是否是文件流
  39.           const isFile = files ? files.constructor === FileList || (files.constructor === Array && files[0].constructor === File) : false;
  40.           if (isFile) {
  41.             for (let i = 0; i < files.length; i++) {
  42.               formData.append(key, files[i]);
  43.             }
  44.           } else {
  45.             formData.append(key, files);
  46.           }
  47.         }
  48.         return formData;
  49.       }
  50.       // json字符串{key: value}
  51.       return Object.keys(requestData).length ? JSON.stringify(requestData) : '';
  52.     }
  53.     /**
  54.      * ajax实现文件下载、获取文件下载进度
  55.      * @param {String} method - 请求方法get/post
  56.      * @param {String} url
  57.      * @param {Object} [params] - 请求参数，{name: '文件下载'}
  58.      * @param {Object} [config] - 方法配置
  59.      */
  60.      function downLoadAjaxEvt(method = 'get', url, params, config) {
  61.       const _method = method.toUpperCase();
  62.       const _config = Object.assign({
  63.         contentType: _method === 'GET' ? 'application/x-www-form-urlencoded' : 'application/json',  // 请求头类型
  64.         fileName: '未知文件',                                        // 下载文件名(必填，若为空，下载下来都是txt格式)
  65.         async: true,                                                // 请求是否异步-true异步、false同步
  66.         token: 'token'                                              // 用户token
  67.       }, config);
  68. ​
  69.       const queryParams = transformRequestData(_config.contentType, params);
  70.       const _url = `${url}${_method === 'GET' && queryParams ? '?' + queryParams : ''}`;
  71. ​
  72.       const ajax = new XMLHttpRequest();
  73.       ajax.open(_method, _url, _config.async);
  74.       ajax.setRequestHeader('Authorization', _config.token);
  75.       ajax.setRequestHeader('Content-Type', _config.contentType);
  76.       // responseType若不设置，会导致下载的文件可能打不开
  77.       ajax.responseType = 'blob';
  78.       // 获取文件下载进度
  79.       ajax.addEventListener('progress', (progress) => {
  80.         const percentage = ((progress.loaded / progress.total) * 100).toFixed(2);
  81.         const msg = `下载进度 ${percentage}%...`;
  82.         console.log(msg);
  83.       });
  84.       ajax.onload = function () {
  85.         if (this.status === 200 || this.status === 304) {
  86.           // 通过FileReader去判断接口返回是json还是文件流
  87.           const fileReader = new FileReader();
  88.           fileReader.onloadend = (e) => {
  89.             if (this.getResponseHeader('content-type').includes('application/json')) {
  90.               const result = JSON.parse(fileReader.result || '{message: 服务器出现问题，请联系管理员}');
  91.               alert(result.message);
  92.             } else {
  93.               // 两种解码方式，区别自行百度: decodeURIComponent/decodeURI（主要获取后缀名，否则低版本浏览器会一律识别为txt，导致下载下来的都是txt）
  94.               const _fileName = decodeURIComponent((this.getResponseHeader('content-disposition') || '; filename="未知文件"').split(';')[1].trim().slice(9));
  95.               /**
  96.               * Blob.type一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。
  97.               * 对于pdf：type为application/pdf  同时 a标签 不设置download属性, 可以直接预览
  98.               */
  99.               const blob = new Blob([this.response]);
  100.               const href = URL.createObjectURL(blob);
  101.               downloadEvt(href, _fileName);
  102.               // 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象
  103.               URL.revokeObjectURL(href);
  104.             }
  105.           };
  106.           // 调用readAsText读取文件，少了readAsText将不会触发onloadend事件
  107.           fileReader.readAsText(this.response);
  108.         } else {
  109.           alert('服务器出现问题，请联系管理员');
  110.         }
  111.       };
  112.       // send(string): string：仅用于 POST 请求
  113.       ajax.send(queryParams);
  114.     }
  115.   </script>
  116. </body>
  117. ​

  • 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）

  1. <body>
  2.   <button onclick="downLoadAjaxEvt('get', 'http://192.168.66.183:13666/download?name=HAP.pdf')">ajax下载(base64)</button>
  3.   <script>
  4.     function downloadEvt(url, fileName = '未知文件') {
  5.       const el = document.createElement('a');
  6.       el.style.display = 'none';
  7.       el.setAttribute('target', '_blank');
  8.       /**
  9.        * download的属性是HTML5新增的属性
  10.        * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
  11.        * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
  12.        * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
  13.        */
  14.       fileName && el.setAttribute('download', fileName);
  15.       el.href = url;
  16.       console.log(el);
  17.       document.body.appendChild(el);
  18.       el.click();
  19.       document.body.removeChild(el);
  20.     };
  21. ​
  22.     // 根据header里的contenteType转换请求参数
  23.     function transformRequestData(contentType, requestData) {
  24.       requestData = requestData || {};
  25.       if (contentType.includes('application/x-www-form-urlencoded')) {
  26.         // formData格式：key1=value1&key2=value2，方式二：qs.stringify(requestData, {arrayFormat: 'brackets'}) -- {arrayFormat: 'brackets'}是对于数组参数的处理
  27.         let str = '';
  28.         for (const key in requestData) {
  29.           if (Object.prototype.hasOwnProperty.call(requestData, key)) {
  30.             str += `${key}=${requestData[key]}&`;
  31.           }
  32.         }
  33.         return encodeURI(str.slice(0, str.length - 1));
  34.       } else if (contentType.includes('multipart/form-data')) {
  35.         const formData = new FormData();
  36.         for (const key in requestData) {
  37.           const files = requestData[key];
  38.           // 判断是否是文件流
  39.           const isFile = files ? files.constructor === FileList || (files.constructor === Array && files[0].constructor === File) : false;
  40.           if (isFile) {
  41.             for (let i = 0; i < files.length; i++) {
  42.               formData.append(key, files[i]);
  43.             }
  44.           } else {
  45.             formData.append(key, files);
  46.           }
  47.         }
  48.         return formData;
  49.       }
  50.       // json字符串{key: value}
  51.       return Object.keys(requestData).length ? JSON.stringify(requestData) : '';
  52.     }
  53.     /**
  54.      * ajax实现文件下载、获取文件下载进度
  55.      * @param {String} method - 请求方法get/post
  56.      * @param {String} url
  57.      * @param {Object} [params] - 请求参数，{name: '文件下载'}
  58.      * @param {Object} [config] - 方法配置
  59.      */
  60.      function downLoadAjaxEvt(method = 'get', url, params, config) {
  61.       const _method = method.toUpperCase();
  62.       const _config = Object.assign({
  63.         contentType: _method === 'GET' ? 'application/x-www-form-urlencoded' : 'application/json',  // 请求头类型
  64.         fileName: '未知文件',                                       // 下载文件名(必填，若为空，下载下来都是txt格式)
  65.         async: true,                                               // 请求是否异步-true异步、false同步
  66.         token: 'token'                                             // 用户token
  67.       }, config);
  68. ​
  69.       const queryParams = transformRequestData(_config.contentType, params);
  70.       const _url = `${url}${_method === 'GET' && queryParams ? '?' + queryParams : ''}`;
  71. ​
  72.       const ajax = new XMLHttpRequest();
  73.       ajax.open(_method, _url, _config.async);
  74.       ajax.setRequestHeader('Authorization', _config.token);
  75.       ajax.setRequestHeader('Content-Type', _config.contentType);
  76.       // responseType若不设置，会导致下载的文件可能打不开
  77.       ajax.responseType = 'blob';
  78.       // 获取文件下载进度
  79.       ajax.addEventListener('progress', (progress) => {
  80.         const percentage = ((progress.loaded / progress.total) * 100).toFixed(2);
  81.         const msg = `下载进度 ${percentage}%...`;
  82.         console.log(msg);
  83.       });
  84.       ajax.onload = function () {
  85.         if (this.status === 200 || this.status === 304) {
  86.           // 通过FileReader去判断接口返回是json还是文件流
  87.           const fileReader = new FileReader();
  88.           fileReader.readAsDataURL(this.response);
  89.           fileReader.onload = () => {
  90.             if (this.getResponseHeader('content-type').includes('application/json')) {
  91.               alert('服务器出现问题，请联系管理员');
  92.             } else {
  93.               // 两种解码方式，区别自行百度: decodeURIComponent/decodeURI（主要获取后缀名，否则某些浏览器会一律识别为txt，导致下载下来的都是txt）
  94.               const _fileName = decodeURIComponent((this.getResponseHeader('content-disposition') || '; filename="未知文件"').split(';')[1].trim().slice(9));
  95.               // 也可以用FileSaver（需提前引入https://github.com/eligrey/FileSaver.js）: saveAs(fileReader.result, _fileName);
  96.               downloadEvt(fileReader.result, _fileName);
  97.             }
  98.           }
  99.         } else {
  100.           alert('服务器出现问题，请联系管理员');
  101.         }
  102.       };
  103.       // send(string): string：仅用于 POST 请求
  104.       ajax.send(queryParams);
  105.     }
  106.   </script>
  107. </body>
  108. ​

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

优点

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

  • 可以在header中携带token做鉴权操作

  • 可以获取文件下载进度

  • 可以判断接口是否返回成功

缺点

  • 兼容性问题，IE10以下不可用

  • 将后端返回的文件流全部获取后才会下载

八、大文件下载注意点

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

    图8-1

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

    图8-2

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/63608
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号