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

本文主要是介绍js前端点击下载后端传来的文件流文件（格式不定），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

// 下载文件的公共组件方法
/*** 下载二进制文件* @param {*} binary 二进制* @param {*} fileName 下载的文件名*/
export function downBinary(binary, config) {const { fileName, contentType } = configconst 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()}}