前端（vue）文件流下载

前端（vue）文件流下载

1.首先进行封装在utils中，直接复制即可

export function dataToFile (params) {
  let type = params.type;
  let fileName = params.fileName;
  let data = params.data;
  // 兼容 IE
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(new Blob([data]), fileName);
  } else {
    // 非IE 浏览器
    const url = window.URL.createObjectURL(new Blob([data], { type }));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `${fileName}`);
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(url); // 释放内存
  }
}

2.接口，其中可以看到给接口添加了responseType，用来指定后台返回响应数据的类型，其中’arraybuffer‘返回的是包含二进制数据的JavaScriptArraybuffer。

 getAttachmentByNameList: (fileName, filePath) => axios.get('getAttachmentByName?fileName=' + fileName + '&filePath=' + filePath, {
    responseType: 'arraybuffer'
  })

3.一般下载都得首先去触发点击，点击后下载。点击时候去拿到下载文件的下载文件名，下载数据流，下载的类型，请求content-type 要设置为 application/octet-stream（二进制流数据），这样我们的的参数就全齐了

 getAttachmentByName (row) {
      let fileName = row.fullName;
      let filePath = row.fullPath;
      API.getAttachmentByNameList(fileName,fullPath).then((res) => {
        let params = {
          data: res.data,
          fileName: fileName,
          type: 'application/octet-stream;'
        };
        dataToFile(params);
      });
    },

4.拓展 ，在http请求中，一般接口相应得是200，数据类型还都是json格式，这个数据类型返回的是’ArrayBuffer’，这时候需要去判断数据类型，从而去根据类型不去抛出错误 ，不去提示。

这里用到了对象原型链判断方法。不推荐使用 typeof 和 instanceof 去判断数据类型。如果数据类型是‘ArrayBuffer’，那么直接返回数据即可，不去抛出错误即可。

axios.interceptors.response.use(
  res => {
    let json = res.data;
    if (Object.prototype.toString.call(json) === '[object ArrayBuffer]') {
      return res;
    }  //判断是否是ArrayBuffer数据类型
 
    if (json && json.status !== '200' && json.status !== '10004') {
      APP.$message({
        message: json.err,
        type: 'error'
      });
    }
    return res;
  },
  error => {
    APP.$message({
      message: '请求异常',
      type: 'error'
    });
    return Promise.reject(error);
  }
);

————————————————