通过 Blob 对二进制流文件下载实现文件保存下载

原理：前端将二进制文件做转换实现下载: 请求后端接口->接收后端返回的二进制流(通过二进制流（Blob）下载,把后端返回的二进制文件放在 Blob 里面)->再通过file-saver插件保存

页面上使用：

<span @click="downloadFile">下载当前文件模板</span>

downloadFile() {
	let dowloadUrl
	if (this.dowloadUrl) {
	    dowloadUrl = this.dowloadUrl 
	}else if (this.fullPathUrl) {
	    dowloadUrl = this.fullPathUrl
	}
   downloadGet(dowloadUrl, `${this.fileName}.csv`, {})
},

保存文件：

import { saveAs } from 'file-saver'

发起请求通用方法（更改 axios 的 responseType）：

// 通用下载方法，blob形式--【post请求】
export function download(url, params, filename, config) {
  downloadLoadingInstance = Loading.service({
    text: '正在下载数据，请稍候',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  return service
    .post(url, params, {
      transformRequest: [
        (params) => {
          return tansParams(params)
        }
      ],
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      responseType: 'blob', // 指定响应类型为二进制数据
      ...config
    })
    .then(async(data) => {
      const isLogin = await blobValidate(data)
      if (isLogin) {
        const blob = new Blob([data])
        saveAs(blob, filename)
      } else {
        const resText = await data.text()
        const rspObj = JSON.parse(resText)
        const errMsg =
          errorCode[rspObj.code] || rspObj.msg || errorCode['default']
        Message.error(errMsg)
      }
      downloadLoadingInstance.close()
    })
    .catch((r) => {
      console.error(r)
      Message.error('下载文件出现错误，请联系管理员！')
      downloadLoadingInstance.close()
    })
}

// 通用下载方法，blob形式--【get请求】
export function downloadGet(url, filename, config) {
  downloadLoadingInstance = Loading.service({
    text: '正在下载数据，请稍候',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  return service
    .get(url, {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      responseType: 'blob',// 指定响应类型为二进制数据
      ...config
    })
    .then(async(data) => {
      const isLogin = await blobValidate(data)
      if (isLogin) {
        const blob = new Blob([data])
        saveAs(blob, filename)
      } else {
        const resText = await data.text()
        const rspObj = JSON.parse(resText)
        const errMsg =
          errorCode[rspObj.code] || rspObj.msg || errorCode['default']
        Message.error(errMsg)
      }
      downloadLoadingInstance.close()
    })
    .catch((r) => {
      console.error(r)
      Message.error('下载文件出现错误，请联系管理员！')
      downloadLoadingInstance.close()
    })
}

封装的方法：

/**
* 参数处理
* @param {*} params  参数
*/
export function tansParams(params) {
  let result = ''
  for (const propName of Object.keys(params)) {
    const value = params[propName]
    var part = encodeURIComponent(propName) + '='
    // if (value !== null && value !== "" && typeof (value) !== "undefined") {
    if (value !== null && typeof (value) !== 'undefined') {
      if (typeof value === 'object') {
        for (const key of Object.keys(value)) {
          if (value[key] !== null && value[key] !== '' && typeof (value[key]) !== 'undefined') {
            const params = propName + '[' + key + ']'
            var subPart = encodeURIComponent(params) + '='
            result += subPart + encodeURIComponent(value[key]) + '&'
          }
        }
      } else {
        result += part + encodeURIComponent(value) + '&'
      }
    }
  }
  return result
}

// 验证是否为blob格式
export async function blobValidate(data) {
  try {
    const text = await data.text()
    JSON.parse(text)
    return false
  } catch (error) {
    return true
  }
}


// errorCode.js： 
export default {
  '401': '认证失败，无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误，请反馈给管理员'
}

点击"下载"：

相关技术

Blob

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

Blob 构造函数

const aBlob = new Blob(array, option)

第一个参数是一个类数组， 必填

第二个参数非必填有两个属性： type, 表示MIME类型， 默认值是''。还有一个是endings 表示 /n 换行符如何被写入，默认值是'transparent'保持不变， 还有'native'按照宿主机的换行符

总结

前端实现文件的下载主要有两种方式，直接打开下载链接和通过 Blob 对二进制流文件下载，实际用那种方法可以看后端的返回值和请求方式

其他：

根据返回值构造 Blob 函数并转换成 URL ，动态创建 a 标签打开 URL参考：
https://huaweicloud.csdn.net/63a55dc4b878a545459452ae.html