前端（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);  });

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

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-05/154597.html，文章来源：网络cs，作者：付梓，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！