接口返回流、前端实现下载

丶乘风破浪丶

已于 2022-04-02 15:59:30 修改

阅读量272

点赞数

分类专栏： ⭐️ javascript 文章标签： javascript

于 2019-02-18 10:42:16 首次发布

本文链接：https://blog.csdn.net/qq_40963664/article/details/87604100

版权

⭐️ javascript 专栏收录该内容

75 篇文章 2 订阅

订阅专栏

接口返回输出流

arraybuffer或blob格式的流传给Blob，使用URL生成链接，点击下载

Blob是一个类文件的不可变的原始数据对象，非javascript原生数据类型，File对象就是继承自Blob对象，且在Blob的基础上进行扩展，以便支持用户系统上的文件。

场景：
通过异步请求后端接口【后端数据通过流返回】实现点击下载
接口返回输出流
arraybuffer或blob格式的流传给Blob，使用URL生成链接，点击下载

接口返回输出流

export function downByData(method,url,){
  this.$axios({
    method: 'get',
    url,
    params: {
      page:1,
      size:10
    },
    responseType: 'blob',
    headers: {
      Accept: 'application/ms-excel',
      'Content-Type': 'application/json;charset=UTF-8'
    }
  }).then(res => {
    // 获取文件名  
    const filename = decodeURI(res.headers['content-disposition'].split('filename=')[1])
    downloadByData(res.data,filename);
  })
}

arraybuffer或blob格式的流传给Blob，使用URL生成链接，点击下载


/**
 * Download 根据后端数据流下载
 * @param  data  下载数据
 * @param  filename 文件名
 * @param  mime  格式
 * @param  bom
 */
export function downloadByData(data, filename, mime, bom) {

  if (!'download' in document.createElement('a')) {
    alert('浏览器不支持')
    return;
  }  
  
  const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
  // IE 处理
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
    window.navigator.msSaveBlob(blob, filename);
  } else {
    const blobURL = window.URL.createObjectURL(blob);
    const tempLink = document.createElement('a');
    tempLink.style.display = 'none';
    tempLink.href = blobURL;
    tempLink.setAttribute('download', filename);
    if (typeof tempLink.download === 'undefined') {
      tempLink.setAttribute('target', '_blank');
    }
    document.body.appendChild(tempLink);
    tempLink.click();
    document.body.removeChild(tempLink);
    window.URL.revokeObjectURL(blobURL);
  }
}