js 文件下载，当前页下载，新标签下载____后端返回 GET/POST 文件流，下载文件...

• ajax

• /**
   * Created by kjf on 2019-03-25.
   *
   * axios.request(config)
     axios.get(url[, config])
     axios.post(url[, data[, config]])
     axios.delete(url[, config])
     axios.head(url[, config])
     axios.options(url[, config])
     axios.put(url[, data[, config]])
     axios.patch(url[, data[, config]])
   */
  import axios from 'axios';
  
  export default function (url, data = {}, method = 'GET', params, headers) {
      return new Promise((resolve, reject) => {
          let promise = null;
          if (method === 'GET') {
              promise = axios.get(url, {params: data, headers});
          } else if (method === 'POST') {
              promise = axios.post(url, data, {params: params, headers});
          }
          promise
              .then(response => resolve(response))
              .catch(err => {
                  // console.log("/src/axios/ajax.js----error: "+err)
                  reject(err);
              });
      });
  }

1. 直接用 Ajax 发 POST/GET 请求

错误的方式：

• export const requestDownloadLabFile = (id) => { // 下载附件
      const url = preFixed + '/lab/myExperimentOperator/download/' + id;
      return ajax(url, {}, 'GET', {}, {'labAuth': 'http://localhost:7000'});
  };

正确的方式：(缺点： 必须要知道 文件名.类型，意味着后端必须给到 这样的一个字段)

• export const requestDownloadLabFile = (id) => { // 下载附件
      const url = preFixed + '/lab/myExperimentOperator/download/' + id;
  
      ajax(url, {}, 'GET', {}, {'labAuth': 'http://localhost:7000'}).then(res=> {
              const content = res.data;
              const blob = new Blob([content]);
              const fileName = 'fileName.type';
              if ('download' in document.createElement('a')) { // 非IE下载
                  const elink = document.createElement('a');
                  elink.download = fileName;
                  elink.style.display = 'none';
                  elink.href = URL.createObjectURL(blob);
                  document.body.appendChild(elink);
                  elink.click();
                  URL.revokeObjectURL(elink.href); // 释放URL 对象
                  document.body.removeChild(elink);
              } else { // IE10+下载
                  navigator.msSaveBlob(blob, fileName);
              }
      });
      return 0;
  }

2. window.open 此类方法，兼容性不好

• export const requestDownloadLabFile = (id) => { // 下载附件
      const url = preFixed + '/lab/myExperimentOperator/download/' + id;
  
      window.open(url, '_blank'); // 新打开窗口
  };

3. form 当前页下载： (当 链接失效 时，影响当前页, 但是可以接受)____推荐使用

• diyDownload

• export const diyDownload = (url, data, method = 'GET') => {
      const body = document.getElementsByTagName('body')[0];
      const form = document.createElement('form');
      form.method = method;
      form.action = url;
      for (let key in data) {
          let param = document.createElement('input');
          param.type = 'hidden';
          param.name = key;
          param.value = data[key];
          form.appendChild(param);
      }
      body.appendChild(form);
      form.submit();
      body.removeChild(form);
  };

• export const requestDownloadLabFile = (id) => { // 下载附件
      const url = preFixed + '/lab/myExperimentOperator/download/' + id;
      diyDownload(url, {}, 'GET');
  };

4. iframe 标签下载： (当 链接失效 时，不会影响当前页)

• export const requestDownloadLabFile = (id) => { // 下载附件
      const url = preFixed + '/lab/myExperimentOperator/download/' + id;
  
      try {
          let elemIF = document.createElement('iframe');
          elemIF.src = url;
          elemIF.style.display = 'none';
          document.body.appendChild(elemIF);
      } catch (e) {
          myConsole('下载异常！');
      }
  };

 

转载于:https://www.cnblogs.com/tianxiaxuange/p/10983284.html