在 Vue 项目中,经常会遇到下载文件流的情况,使用 new Blob二进制进行文件下载功能(vue后台返回文件流下载导出函数封装、调用示例),type不同下载的文件格式也不同,这边本文章下载的是xlsx文件,可根据自己项目场景更换 new Blob() 的 type 即可

这边带大家如何封装使用(直接C/V就可以用了)

new Blob(): Vue 之 new Blob() 文件流下载文件不同文件类型的 type 值整理_L_羽鹏的博客-CSDN博客


import axios from 'axios'
const service = axios.create({
  // axios中请求配置有baseURL选项,表示请求URL公共部分
  baseURL:"http://localhost:3000",
  // 超时
  timeout:2000
})

// 拦截器
......
......

//导出方法
/*
download(url, params, filename)
第一个参数是请求的api
第二个参数是请求参数
第三个参数是导出的文件名
*/
export function download(url, params, filename) {
   //数据请求
  return service.post(url, params, {
    transformRequest: [(params) => {
      return tansParams(params)
    }],
  // 请求头
    headers: {
      'xxx': 'xxx'
    },
    responseType: 'blob'
  }).then((data) => {
    
    const content = data
    const blob = new Blob([content], {
    // 下载的文件格式自己在这边更改type的值就好了
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    })
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a')
      elink.download = filename
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href)
      document.body.removeChild(elink)
    } else {
      navigator.msSaveBlob(blob, filename)
    }
  }).catch((r) => {
    console.error(r)
  })
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐