vue使用blob下载文件遇到的问题小结

 更新时间:2024年02月22日 11:23:45   作者:不悔0.0  
Blob 对象表示一个不可变、原始数据的类文件对象,这篇文章主要介绍了vue使用blob下载文件遇到的问题记录,需要的朋友可以参考下

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取。

在项目中遇到需求,需要将后端返回的二进制流下载成 excel 表格形式,首先,先写一个方法用来下载

export function fileDownload(res) {
  let blob = new Blob([res.data], {
    type: res.data.type,
  })
  let downloadElement = document.createElement('a')
  let href = window.URL.createObjectURL(blob) //创建下载链接
  let fileName = res.headers['content-disposition']
    ? res.headers['content-disposition'].split('attachment;filename=')[1]
    : new Date().getTime()
  downloadElement.href = href
  // window.open(downloadElement.href)
  downloadElement.download = decodeURIComponent(fileName) //解码
  document.body.appendChild(downloadElement)
  downloadElement.click()
  document.body.removeChild(downloadElement)
  window.URL.revokeObjectURL(href) //释放掉blob对象
}

当然,也可以使用自定义的文件名,自己传递一个文件名即可

export function downloadFile(res, fileName) {
  const blob = new Blob([res.data], { type: res.data.type })
  let dom = document.createElement('a')
  let url = window.URL.createObjectURL(blob)
  dom.href = url
  dom.download = decodeURI(fileName)
  dom.style.display = 'none'
  document.body.appendChild(dom)
  dom.click()
  dom.parentNode.removeChild(dom)
  window.URL.revokeObjectURL(url)
}

需要注意的是,要记得在下载接口的地方加上  responseType: 'blob',

切记,一定要加上 responseType: 'blob',  否则下载的会乱码甚至读取不出来

加上之后,在需要使用的地方使用即可

async handleSubmit() {
      if (this.form.pushDepartment.length === 0) {
        this.$message.warning(`推送部门不能为空`)
        return false
      }
      // 导出excel表格
      let params = {
        healthCodeAlarmIds: [],
        sendDepartment: [],
      }
      this.selectData.forEach((item) => {
        let id = parseInt(item.id)
        params.healthCodeAlarmIds.push(id)
      })
      params.sendDepartment = this.form.pushDepartment
      let res = await exportInfo({ ...params })
      // console.log('res', res)
      fileDownload(res)
      // downloadFile(res, 'yj.xlsx')
    },

到此这篇关于vue使用blob下载文件遇到的问题的文章就介绍到这了,更多相关vue blob下载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue弹窗里面使用echarts不显示的问题及解决

    vue弹窗里面使用echarts不显示的问题及解决

    这篇文章主要介绍了vue弹窗里面使用echarts不显示的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • elementPlus表格二次封装过程

    elementPlus表格二次封装过程

    我们正常在开发项目中,表格的风格是一致的,但是表格或多或少会有些不同,有些是需要分页,有些是按钮功能不同,有些又需要加Tag,或者对时间进行格式化等,这篇文章主要介绍了elementPlus表格二次封装过程,需要的朋友可以参考下
    2024-07-07
  • vue el-date-picker 开始日期不能大于结束日期的实现代码

    vue el-date-picker 开始日期不能大于结束日期的实现代码

    这篇文章主要介绍了vue el-date-picker 开始日期不能大于结束日期的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vue中如何实现pdf文件预览的方法

    vue中如何实现pdf文件预览的方法

    这篇文章主要介绍了vue中如何实现pdf文件预览的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue中import导入三种方式详解

    vue中import导入三种方式详解

    在使用vue开发项目的时候,很多使用会import很多模块,这篇文章主要给大家介绍了关于vue中import导入三种方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • Vue3+Vite项目使用less的实现步骤

    Vue3+Vite项目使用less的实现步骤

    最近学习在vite项目中配置less,本文主要介绍了Vue3+Vite项目使用less的实现步骤,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-02-02
  • Vue中的单向数据流原则详解

    Vue中的单向数据流原则详解

    这篇文章主要介绍了Vue中的单向数据流原则,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • 羊了个羊通关脚本Vue node实现版本

    羊了个羊通关脚本Vue node实现版本

    这篇文章主要为大家介绍了羊了个羊通关脚本Vue node实现版本,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 使用vue-cli3打包dist路径问题修改打包配置

    使用vue-cli3打包dist路径问题修改打包配置

    这篇文章主要介绍了使用vue-cli3打包dist路径问题修改打包配置,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 如何在Vue3中使用Ref访问DOM元素详解

    如何在Vue3中使用Ref访问DOM元素详解

    在Vue3中可以使用`ref`来获取DOM元素,下面这篇文章主要给大家介绍了关于如何在Vue3中使用Ref访问DOM元素的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09

最新评论