前端下载方案大全

一、a 标签下载

<body>
  <button onclick="downloadEvt('http://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>

````

#### 优点：

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

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

## 二、form标签下载

```js
<body>
  <button
    onclick="inputDownloadEvt('get', 'http://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>
```

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


## 四、iframe下载

```js
<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>

```

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


## 六、ajax下载（Blob - 利用Blob对象生成Blob URL）
如果后端需要做token验证，那么a、form、iframe、window.open、location.href都无法在header中携带token，这时候可以使用ajax来实现。

```js
<body>
  <button
    onclick="downLoadAjaxEvt('get', 'http://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表示文件流返回失败

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

#### 优点
1. 可以下载txt、png、pdf等类型文件 可以在header中携带token做鉴权操作
2. 可以获取文件下载进度 可以判断接口是否返回成功
#### 缺点
1. 兼容性问题，IE10以下不可用
将后端返回的文件流全部获取后才会下载

## 七、ajax下载（Data URL - base64编码后的url）
<body>
  <button
    onclick="downLoadAjaxEvt('get', 'http://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下载大文件时，会出现浏览器崩溃情况，此时可以考虑使用链接直接下载或使用分片下载

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