vue通过接口返回的文件流/图片哦/文档下载到本地

一、前端vue使用blob下载流文件

axios:

export function exportEcoCarAppoint(params) {
  return Http({
    url: '/api/jsis/ecoCarAppoint/exportEcoCarAppoint' ,
    method: 'POST',
    data: params,
    responseType: 'blob',   //设置响应格式
  })
}

fetch:

fetch('url', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  credentials: 'include', // 携带cookie
  body: JSON.stringify(data), // 接受需转换字符串
 })
 .then((res) => {
   return resolve(res.blob()) // 将文件转换为blob文件抛出
})

使用

exportEcoCarAppoint(this.search).then(res => {
        // window.URL.createObjectURL(new Blob([res],{type:['image/png', 'pdf','doc','docx','xlsx','xls']}))
        let b = new Blob([res.data]);     //拿到文件流下载对象, 有的定义不需要.data,根据后端返回字段定
        let url = window.URL.createObjectURL(b);  //生成文件流下载链接
        let a = document.createElement('a');      //创建一个a标签用来跳转
        a.href = url;                             // a标签 href  赋值 链接  
        a.download = '报表.xlsx';                  //设置下载文件的文件名和文件格式， 这里一定要加上格式，不然下载的文件一直是txt格式的
        document.body.appendChild(a);             //将标签DOM，放置页面
        a.click();                              
        window.URL.revokeObjectURL(url);     //释放 url 对象内存
        document.body.removeChild(a);
      }).catch(err => {
        return Promise.reject(err)
      })

二、arraybuffer转换文件下载

场景：当你请求接口看到返回以上图 JFIF 时，侧为乱码，你需要做以下步骤实现图片下载

1、将响应的数据类型调整为  responseType: 'arraybuffer'

request({
    url: '后端接口url',
    method: 'get',
    params
    responseType: 'arraybuffer'
})

 2、将数据转换为base64

将返回的res数据转换为base64位

const imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`

3、将处理的图片下载即可

// 将图片的src属性作为URL地址
const a = document.createElement('a')
const event = new MouseEvent('click')
a.download = 'name' // '下载图片名称'
a.href = imgUrl // base图片地址
a.dispatchEvent(event)