文件下载 （文件地址/二进制文件）

在HTML5中，download是 a 标签的新增属性，download属性能让我们指定浏览器下载文件时的默认名称，将download属性添加到 a 链接上，当我们点击这个链接，download属性值里的名称会显示到弹出的下载框里，而且download属性能够强制触发下载操作。下面是分别用地址和文件流的方式实现文件的下载

一、直接用文件的地址将文件下载到本地

handleDownload(url) {
   // 直接在浏览器预览 （同源就会直接下载）
    var a = document.createElement('a')  // 创建a标签
    const event = new MouseEvent('click')  // 鼠标点击事件
    a.href = url  // 文件路径
    a.download = '文件名（可自定义）'  // 文件名 
    a.dispatchEvent(event)  // 触发a标签的点击事件
  }

二、获取二进制文件进行下载

前端由于安全方面的因素，不能直接对文件进行写操作。但是在实际的业务需求中，难免会遇到各种各样文件的下载、预览。
如果服务端下载文件是以流的形式传递到前端，前端通常是将流转换为objectURL,借用a标签的download属性，进行文件下载。但是有时候会遇到下载文件处理失败的场景，这样服务端消息的返回格式不再是流，而是json，此时虽然前端可以正常导出文件，但是文件内容是服务端返回的消息，处置不怎么妥当，这个时候，能有读取流的方法就好了。本文简要概述下，前端读取二进制流的方法

handleDownload() {
   this.$axios({
     method: 'get',
     url: url,
     params: {
       path: path
     },
     contentType: 'application/x-www-form-urlencoded;charset=utf-8',
     responseType: 'blob' // 将请求头的response-type 设置成 blob
   }).then(res => { // 再获得响应函数内写逻辑
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {  // 兼容IE msSaveBlob 和 msSaveOrOpenBlob 方法允许用户在客户端上保存文件
         navigator.msSaveBlob(new Blob([res], name))
      } else {
        const blob = new Blob([res], { type: res.type })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a') // 创建a标签
        link.href = url
        link.download = `${row.name}.${row.file_path.split('.')[1]}` // 重命名文件
        link.click()
        URL.revokeObjectURL(url) // 释放内存
      }
   })
}

二进制文件的读取
上述只是二进制流文件一般的下载方式，当服务端传回的响应类型content-type=application/json时，我们仍以二进制流的方式去解析处理，会导致导出文件内容出现问题，比如Excel中，内容为服务端响应的消息，因此，我们在处理服务器响应内容时，需要做下前置的拦截。

//  声明一个blob变量
var debug = { hello: "world" };
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'})

blob内容的读取，主要有两种方式，FileReader和Response。

FileReader
这个对象主要就是用来读取文件内容，兼容性比较好，有以下几种读取内容格式：readAsArrayBuffer、readAsBinaryString、readAsDataURL、readdAsText。FileReader读取方法主要如下所示

/**
*   例： 将文件按照 txt 的方式读取
*  readdAsText
*/
 var reader = new FileReader()
 reader .readdAsText(response, 'gbk') //  response 二进制的文件，  gbk： 文本的编码方式，默认值为utf-8
 reader.addEventListener('loadend', function (e) {
    console.log(e.target.result)
 })

Response
Response是Fetch API的一个接口，呈现的是对一次请求数据的响应。浏览器兼容性比FileReader要差点，支持Chrome 42+、FireFox 39+。

Response实例化

let myResponse = new Response(body, init)

Response实现了body接口，所以，在实例化Response时，可以调用Body.blob()、body.formData()、body.json()、body.text()序列化返回值，返回值是一个Promise。具体实现方法如下所示：

var blobReader = new Response(blob).json()
blobReader.then(res => {
     console.log(res)
 })