用Blob下载文件流

Posted 2021-09-13 BerylLee

需求：请求后台接口，下载文件，如果成功的话，直接获取到文件流下载，而不是路径。

创建一个blob对象
语法:
var BlobData = new Blob( array, options );

参数：
array： 一个数组形式的参数。官方概念：由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。
options:一个对象形式的参数。官方概念：是一个可选的BlobPropertyBag字典。有两个属性，type，默认值为 ""，放入到blob中的数组内容的MIME类型。endings，默认值为"transparent"，用于指定包含行结束符\\n的字符串如何被写入。

创建实例：

var blob = new Blob([data], { type: \'charset=utf-8\' })//data一般是后台返回的数组结果。

vue+elementUI post请求下载模板

以下代码可以直接复制使用，需要更换“传给后台的数据”、“url” 以及下载文件的“文件名”。

downLoad(){//调用方法
  //创建一个加载框
  //注：如果文件过大，会出现点击下载后短时间内页面无反应，建议创建加载框提高交互效果
  const loading = this.$loading({//elementUI
    lock: true,
    text: \'拉取文件中\',
    spinner: \'el-icon-loading\',
    background: \'rgba(0, 0, 0, 0.7)\'
  })
  //创建需要传送的data，这里用的是Fromdata格式，需根据项目情况来修改
  var fileData = new FormData()
  fileData.append(\'id\',id)
  axios({//注意需在页面引入axios
    method: \'post\',//请求方式
    url: \'http://*****\',//请求地址
    data: fileData,//传输数据
    responseType: \'blob\'//数据格式
  }).then(res => {
    var blob = new Blob([res.data], { type: \'charset=utf-8\' })
    var downloadElement = document.createElement(\'a\')
    var href = window.URL.createObjectURL(blob)//创建链接
    downloadElement.href = href//a标签赋值
    downloadElement.download = \'文件名字\' + \'.pdf\'//文件类型
    document.body.appendChild(downloadElement)//a标签添加到页面
    downloadElement.click()//执行a标签点击效果
    document.body.removeChild(downloadElement)//移除a标签
    window.URL.revokeObjectURL(href)//释放URL对象
    loading.close()//关闭加载框
 })
 
 //下载结束
}