vue使用文件流进行下载-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue使用文件流进行下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

new Blob(): Vue 之 new Blob() 文件流下载文件不同文件类型的 type 值整理_L_羽鹏的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-565701.html


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)
  })
}

到了这里，关于vue使用文件流进行下载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！