前端下载通常分为两种情形，一种是后端直接给一个文件地址，通过浏览器打开就可以下载，另外一种则需要发送请求，后端返回二进制流数据，前端解析流数据，生成URL，实现下载。

指定文件路径下载

该方式将下载逻辑放在后端处理，后端给出固定的url，前端使用window.location.herf下载

  window.location.herf = '/xxx/xxx/xxxx'

根据请求返回二进制数据流，生成流文件URL下载

该方式是发送请求后端返回二进制数据流，前端解析二进制流生成下载URL，再通过HTML5中<a>标签的download属性实现下载功能。

一、封装解析二进制流数据生成下载URL方法

根据二进制流数据生成下载URL可以有多种方式实现，具体实现如下：

1、将二进制数据封装为BLOB对象

// utils.js
export const download = (res, type, filename) => {
  // 创建blob对象，将二进制数据封装为BLOB对象
  const blob = new Blob([res], {
    // 如何后端没返回下载文件类型，则需要手动设置：type: 'application/pdf;chartset=UTF-8' 表示下载文档为pdf，如果是word则设置为msword，excel为excel
    type: type
  })
  const a = document.createElement('a')
  // 兼容webkix浏览器，处理webkit浏览器中herf自动添加blob前缀，默认在浏览器打开而不是下载
  const URL = window.URL || window.webkitURL
  // 根据blob对象创建URL 对象，生成本地URL
  const herf = URL.createObjectURL(blob)
  // 下载链接
  a.href = herf
  // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
  a.download = filename
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  // 在内存中移除URL 对象
  window.URL.revokeObjectURL(herf)
}

2、将二进制数据封装为文件读取FileReader对象

// utils.js
export const download = (res) => {
  // 创建文件对象
  let reader = new FileReader()
  // 监听读取完毕
  reader.onloadend = function () {
    // 返回base64位的文件内容
    let url = reader.result
    // 下载
    window.location.href = url
  }
  // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
  reader.readAsDataURL(res)
}

注意： 使用 FileReader对象封装二进制流之后没办法设置下载的文件名，默认文件名为下载，文件格式根据读取的是请求返回的content-type。

3、使用插件file-saver

• 下载插件

 npm install --save file-saver

• 引入插件

 import { saveAs } from 'file-saver'

• 封装下载方法，使用插件

 export const downloadFile = (res, type, filename) => {
   // 将二进制数据封装成blob对象
    const blob = new Blob([res], {
     type: type
   })
   /**
     这里也可以使用File对象封装二进制数据
     const file = new File([res], filename, {
       type: type
     });
   */
   // 调用插件方法
   saveAs(blob,filename)
 }

插件源码

4、使用插件downloadjs

• 下载插件

 npm install --save downloadjs

• 引入插件

 const download = require('downloadjs')

因为downloadjs源码中没有通过export导出download方法，而是通过return的方式返回download方法，因为需要使用require来引入文件。

• 封装下载方法，使用插件

  export const downloadFile = (res, type, filename) => {
    // 将二进制流转成blob对象
    const blob = new Blob([res], {
      type: type
    })
    // 调用插件方法
    download(blob, filename, type);
  }

插件源码

二、发送请求，获取二进制流数据

// index.vue
<template>
  <div>
    <button @click='handleDownload'>下载</button>
  </div>
</template>
<script>
// 引入下载方法
import {download} from 'utils'
export default{
  methods: {
    async downloadFile () {
      let res = await axios.get(
        url: 'xxxx/xxxx',
        method: 'GET',
        // 设置返回数据类型，这里一定要设置，否则下载下来的文件会是空白,也可以是`arraybuffer`
        responseType: 'blob',
        params: {
          id: 'xxxxxx'
        }
      )
      // 获取在response headers中返回的下载文件类型
      let type = JSON.parse(res.headers)['content-type']
      
      /*获取在response headers中返回的下载文件名
        因为返回文件名是通过encodeURIComponent()函数进行了编码，因此需要通过decodeURIComponent()函数解码
      */
      let fileName = decodeURIComponent(JSON.parse(res.headers)['file-name'])
      // 调用封装好的下载函数
      download(res, type, fileName)
    },
    // 点击下载按钮下载
    handleDownload() {
      this.downloadFile()
    }
  }
}
</script>

注意：发送请求时一定要注意设置responseType: 'blob',否则后端返回的数据可能不是二进制流数据。

• 后台返回的二进制数据文件流格式：

  
  文件流.png

• 后端返回响应头:

  
  后端返回响应头.png

总结

以上通过了几种方式实现了前端文件下载功能，除了将下载逻辑放在后端处理，直接提供URL下载以外，后面几种方式都是通过前端发送请求，后端返回二进制流数据，然后封装流数据生成URL的方式，只是在打开方式上有所不同。最后使用的两个插件，查看源码也是围绕着a标签的download属性展开，只是做了兼容性处理。具体使用哪种可以根据自己的情况进行选择。