前端通过Blob实现文件下载、导出功能

一、概要

实现思路：
前端点击下载文件向后台发送请求–>后台以流的形式响应–>前端接到响应后通过Blob对象获取下载路径–>最终通过a标签实现下载。

二、实现方法

/**
 * 下载文件
 * @param url 下载地址
 * @param filename 自定义文件名
 */
export function download(url, filename) {
  getBlob(url, function(blob) {
    saveAs(blob, filename)
  })
}

/**
 * 向后台发送请求，获取文件流
 * @param url 下载地址
 * @param callback  成功回调
 */
function getBlob(url, callback) {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', url, true)
  xhr.responseType = 'blob'
  xhr.onload = function() {
    if (xhr.status === 200) {
      callback(xhr.response)
    }
  }
  xhr.send()
}

/**
 * 保存文件
 * @param blob
 * @param filename
 */
function saveAs(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename)
  } else {
    const link = document.createElement('a')
    document.body.appendChild(link)
    link.href = window.URL.createObjectURL(blob)
    link.download = filename
    link.style.display = 'none'
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(link.href)
  }
}

注意： 请求时一定要加上 responseType = ‘blob’ ，不然下载的文件会出现乱码。

相关链接

• Blob官网：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
• ElementUI实现文件上传：https://blog.csdn.net/Ethan_zxt/article/details/115055036