js前端点击下载后端传来的文件流文件（格式不定）

本文链接：https://blog.csdn.net/m0_45011929/article/details/137079971

文章讲述了在Vue2应用中，如何使用ElementUI组件实现点击表格行下载不同格式文件的功能，关键点在于利用HTTP响应头`content-disposition`获取文件后缀并动态设置Blob对象的类型。

摘要由CSDN通过智能技术生成

需求：点击表格的某一行下载该行的文件，文件格式不确定
知识点：使用到new Blob；需要自己获取文件后缀，然后给文件的后缀格式设为变量，传给Blob
逻辑：原来写下载都是固定下载…xlsx后缀的，这次没想到需要下载动态后缀的文件了，思维就是调取后端下载文件接口时，获取响应头下的数据response.headers['content-disposition']来看文件的格式后缀，截取最后的后缀传给下一步
代码环境：vue2、element
代码

// 下载文件的公共组件方法
/**
 * 下载二进制文件
 * @param {*} binary 二进制
 * @param {*} fileName 下载的文件名
 */
export function downBinary(binary, config) {
  const { fileName, contentType } = config
  const eleLink = document.createElement('a')
  eleLink.download = fileName || `${new Date().valueOf()}`
  eleLink.style.display = 'none'
  const blobConfig = {}
  if (contentType) {
    blobConfig.type = contentType
  }
  const blob = new Blob([binary], blobConfig)
  eleLink.href = window.URL.createObjectURL(blob)
  document.body.appendChild(eleLink)
  eleLink.click()
  document.body.removeChild(eleLink)
}


// 点击某一行下载
import { downBinary } from '@/utils/file'
 // 下载报告
    async onDownLoad(row){
       try{
          this.fullScreenLoading = this.$loading({
            lock: true,
            text: '正在下载',
            spinner: 'el-icon-loading',//可以设置图标
            background: 'rgba(0, 0, 0, 0.5)'
          })
          // start 主要代码
          let response = await commonDownLoad({xxx})// 后端下载接口（请求接口从服务器返回文件流）
          console.log(response,'response')

          let lastindex = response.headers['content-disposition'].lastIndexOf('.')
          let fileType = response.headers['content-disposition'].substring(lastindex+1)
          let fileName = `${row.name}-${moment().format('YYYY年MM月DD日 HH时mm分ss秒')}.${fileType}`
          const contentType = response.headers['content-type']
          downBinary(response.data, { fileName, contentType })
          // END
        }catch(err){
          this.$message.error(err);
        }finally{
          this.fullScreenLoading.close()
        }


    }