js文件下载的方法以及相关概念的解释

参考了一些资料，这里主要是对一些内容作出解释
下载方式基本上都是一样的，代码如下：

  if ('msSaveOrOpenBlob' in navigator) {
     // IE 中下载文件的方法 msSaveBlob 和 msSaveOrOpenBlob
    // msSaveBlob 提供保存按钮
    // msSaveOrOpenBlob 提供保存按钮和打开按钮
        window.navigator.msSaveOrOpenBlob(
          new Blob([response.data], { type: response.headers['content-type'] }),
          fileName
        )
      } else {
        let url = window.URL.createObjectURL(
          new Blob([response.data], { type: response.headers['content-type'] })
        )
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link);
      }

这里解释几个概念

1

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

objectURL = URL.createObjectURL(object);

object用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。​

2

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

要从其他非blob对象和数据构造一个 Blob，请使用 Blob() 构造函数

Blob(blobParts[, options])
返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。

如何读取blob，方式有三种
一，使用FileReader

var reader = new FileReader();

reader.readAsText(blob);
reader.addEventListener("loadend", function() {
  console.log(this)
});

二，使用Response对象

var text = await (new Response(blob)).text();

三，使用blob自带的方法


注意上面第三种返回值与前两种不一样。

3

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。


open方式也可以实现部分文件类型的下载
该方法因为打开一个新窗口，如果url是图片的话会是预览的效果，如果是其他文件比如xlsx文件，会是下载的效果，但是毕竟是一个新窗口，所以会有闪动的效果。

window.open('http://xxx.xlsx')

后端返回文件名字解析

 let headerName = res.headers['content-disposition']
  transFileName (headerName) {
    if (!headerName) return {}
    let name = headerName.split('filename=')[1]
    let fileName = decodeURI(name.split('.')[0])
    let ext = name.split('.')[1]
    return fileName + '.' + ext
  }

请求时要注意一定要修改返回的响应类型

 responseType:'json',//default

 return request({
    url: '/export',
    method: 'post',
    responseType: 'blob',
    data
  })

参考资料FileReader，Blob，URL.createObjectURL()