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

  • 需求:点击表格的某一行下载该行的文件,文件格式不确定
  • 知识点:使用到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()
        }


    }

相关推荐

  1. 返回文件pdf 下载

    2024-04-01 20:48:02       16 阅读
  2. 返回文件格式,前端vue 导出下载表格

    2024-04-01 20:48:02       10 阅读
  3. 下载返回二进制文件

    2024-04-01 20:48:02       6 阅读
  4. 前端接收文件下载解决乱码问题

    2024-04-01 20:48:02       38 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-01 20:48:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-01 20:48:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-01 20:48:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-01 20:48:02       18 阅读

热门阅读

  1. Day35:学习尚上优选项目

    2024-04-01 20:48:02       15 阅读
  2. 说2个AI绘画自动生成器

    2024-04-01 20:48:02       13 阅读
  3. 机器视觉系统在工业零件检测中的应用

    2024-04-01 20:48:02       14 阅读
  4. HTML——1.简介、基础、元素

    2024-04-01 20:48:02       14 阅读
  5. C++与C语言

    2024-04-01 20:48:02       17 阅读
  6. LLM--打造Private GPT需要知道的一些概念及术语

    2024-04-01 20:48:02       17 阅读
  7. Linux 如何一键kill杀死某个被占用的端口

    2024-04-01 20:48:02       16 阅读
  8. c++ map

    2024-04-01 20:48:02       14 阅读
  9. vue3依赖注入解决根组件和多级组件件传值问题

    2024-04-01 20:48:02       14 阅读
  10. Stable Diffusion的界面参数详解

    2024-04-01 20:48:02       12 阅读
  11. Hive详解(2)

    2024-04-01 20:48:02       18 阅读
  12. 自定义多阶段倒计时实现分段倒计时

    2024-04-01 20:48:02       14 阅读