后台项目文件流导出

153 阅读1分钟

头文字d.jfif

在请求拦截器中配置,因为我们后台文件下载接口会有统一的标识,因此可以依据这个条件判断是否为下载接口。


  if (config.url.includes('文件下载请求接口')) {
      config.responseType = 'arraybuffer'//重点,一定要加这个响应类型
    }

2.在响应拦截器中配置,我们这个项目响应类型只要包含这个,就可以判定下载此文件

import urlDaeCodeFileDown from '../utils/urlDaeCodeFileDown'

if (response.headers['content-type'].includes('ms-excel')) {
//因为我们这后台文件名使用URL编码,所以我这需要URL解码
   let fileName = urlDaeCodeFileDown.UrlDecode(response.headers.filename);
   
  urlDaeCodeFileDown.downloadFile(response.data, fileName)

}

3.单独创建的一个js文件放方法

export default {
  downloadFile(blob, name) {
    /* 
      处理二进制数据导出 
       @param blob 二进制流 
       @param name 文件名 
     */

    // type 为需要导出的文件类型,此处为xls表格类型
    const file = new Blob([blob], {
      type: 'application/vnd.ms-excel'
    });
    // 兼容不同浏览器的URL对象
    const url = window.URL || window.webkitURL || window.moxURL;
    // 创建下载链接
    const downloadHref = url.createObjectURL(file);
    // 创建a标签并为其添加属性
    let downloadLink = document.createElement('a');
    downloadLink.setAttribute('href', downloadHref);
    downloadLink.setAttribute('download', name);
    //将a标签添加到body中
    document.body.appendChild(downloadLink);
    // 触发a标签的点击,自动下载
    downloadLink.click();
    //下载完成后移除a标签
    document.body.removeChild(downloadLink);
    //释放下载链接
    url.revokeObjectURL(downloadHref);
  },

  // URL解码
  UrlDecode(zipStr) {
    var uzipStr = '';
    for (var i = 0; i < zipStr.length; i += 1) {
      var chr = zipStr.charAt(i);
      if (chr === '+') {
        uzipStr += ' ';
      } else if (chr === '%') {
        var asc = zipStr.substring(i + 1, i + 3);
        if (parseInt('0x' + asc) > 0x7f) {
          uzipStr += decodeURI('%' + asc.toString() + zipStr.substring(i + 3, i + 9).toString());
          i += 8;
        } else {
          uzipStr += AsciiToString(parseInt('0x' + asc));
          i += 2;
        }
      } else {
        uzipStr += chr;
      }
    }

    return uzipStr;
  },

  StringToAscii(str) {
    return str.charCodeAt(0).toString(16);
  },

  AsciiToString(asccode) {
    return String.fromCharCode(asccode);
  }
}

4.这就是我们这个项目导出导出一个过程,如有不足,请大家多多指出,我再去优化(#^.^#)