vue项目中下载/导出文件

有时我们会遇到下载/导出接口返回的是二进制流文件。这些二进制流文件可相应的变成图片、pdf、excel、zip文件等。

下面就说这些该怎么配置:

在接口请求的时候设置请求的responseType类型, 设置该值能够改变响应类型（重要），告诉服务器你期望的响应格式。

Blob在mdn上的解释是Blob对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。就是英文Binary large Object，mysql有此类型数据结构。

let blog = new Blob(array, options);

Blob() 构造函数返回一个新的 Blob 对象。

array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。

options 是一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：

 **type**，默认值为 ""，它代表了将会被放入到blob中的数组内容的**MIME**类型。

axios.post(url, params, {timeout: 1000,responseType: 'blob'})
  .then(res => {
    console.log(res);
  })
  .catch(err=> {
    console.log(err);
  })
})
// 或者
axios.post(url, params, {timeout: 1000,responseType: 'arraybuffer '})
  .then(response=> {
     //将从后台获取的图片流进行转换
    return 'data:image/png;base64,' + btoa(
      new Uint8Array(response.data).reduce((data, byte) => data + 
         String.fromCharCode(byte), '')
    )
  })
  .catch(err=> {
    console.log(err);
  })
})

或者

export function downLoad(data) {
  return request({
    url: 'xxxxxx',
    method: 'post',
    data: data,
    responseType: 'arraybuffer'
    // responseType: 'blob'
  }).then((response) => { 
    // 处理返回的文件流
    // 若是video 设置
    // let blob = new Blob([res], {type: 'video/mpeg4'});
    // 若是pdf设置
    // const blob = new Blob([response],{type: 'application/pdf'})
    let blob = new Blob([response.data], {type: 'application/zip'})
    let filename = data.filename + '.zip'
    let link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = filename
    document.body.appendChild(link)
    link.click()
    URL.revokeObjectURL(blob)
    document.body.removeChild(link)
  })
}

let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'});// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
        let fileName = decodeURI(res.headers['content-disposition']);// 设置文件名称,decodeURI：可以对后端使用encodeURI() 函数编码过的 URI 进行解码。encodeURI() 是后端为了解决中文乱码问题
        if (fileName) {// 根据后端返回的数据处理文件名称
          fileName = fileName.substring(fileName.indexOf('=') + 1);
        }
        const link = document.createElement('a')// 创建一个a标签
        link.download = fileName;// 设置a标签的下载属性
        link.style.display = 'none';// 将a标签设置为隐藏
        link.href = URL.createObjectURL(blob);// 把之前处理好的地址赋给a标签的href
        document.body.appendChild(link);// 将a标签添加到body中
        link.click();// 执行a标签的点击方法
        URL.revokeObjectURL(link.href) // 下载完成释放URL 对象
        document.body.removeChild(link)// 移除a标签