[JavaScript] 文件下载

一、文件下载

业务中常用的下载类型有多种，其接口的responseType 也不同：
xlsx类型是application/vnd.msexcel，
zip类型application/x-zip-compressed，
其他类型application/octet-stream
在前端接受此数据进行处理时，可以统一转为Blob 数据，然后再生成文件下载。

实现如下：

const filename = response.headers['content-disposition'].match(
      /filename=(.*)/
)[1]
// 首先要创建一个 Blob 对象（表示不可变、原始数据的类文件对象）
const blob = new Blob([response.data], {type: 'application/zip'});
// or const blob = new File([response.data], fileName);

if (typeof window.navigator.msSaveBlob !== 'undefined') {
    // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
    window.navigator.msSaveBlob(blob, decodeURI(filename))
} else {
    let elink = document.createElement("a"); // 创建一个<a>标签
    elink.style.display = "none"; // 隐藏标签
    elink.href = window.URL.createObjectURL(blob); // 配置href，指向本地文件的内存地址
    elink.download = filename;
    elink.click();
    URL.revokeObjectURL(elink.href); // 释放URL 对象
    document.body.removeChild(elink); // 移除<a>标签
}

几个相关的小知识：
1、Content-Type: application/octet-stream 等告诉客户端这是一个二进制文件，content-disposition 字段告诉客户端一个需要下载的附件并告诉浏览器该附件默认的文件名。

2、content-disposition字段正常情况下能在浏览器中看到，但是js获取不到。原因为：默认情况下，header 只有七种 simple response headers （简单响应首部）可以暴露给外部。

Cache-Control
Content-Language
Content-Length
Content-Type
Expires
Last-Modified
Pragma

如果想读取其值可以如下进行设置：

response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
response.setHeader("content-disposition", "attachment; filename=" + filename);

3、如果直接在浏览器中打开Content-Type: application/octet-stream 等二进制类型的文件时，会直接下载，原因是因为浏览器由于无法识别流数据。如果是浏览器可识别的格式，如 xml, image 等则不会下载，会以预览的形式存在。

4、ajax 本身无法触发浏览器的下载功能, 它的 response 会交由 JavaScript 处理，使用 ajax 下载完成后，response 以字符串的形式存储在内存中，所以可以在浏览器中preview中看到返回数据，但是却不可以下载。
但浏览器的 GET 请求（主要以 frame 加载, a 标签点击触发）或 POST请求(以 form 的形式存在)是可以下载文件的，因为这是浏览器的内置事件，下载的 response 会交由浏览器自己处理，浏览器如果识别到是二进制流数据则下载，上面文件下载也是使用的浏览器的此下载功能实现。

二、基础知识

1、 Blob

Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。 Blob 表示的不一定是JavaScript原生格式的数据。

其他非blob对象和数据构造Blob

   const data = { hello: 'world' };
   const blob = new Blob([JSON.stringify(data, null, 2)], {type : 'application/json'});
   console.log(blob)

blob 打印.png

Blob 对象的属性
size:Blob对象中所包含数据的大小（字节）;
type: string，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。看上图 size 为22， type为application/json
Blob对象转为其他格式
即从Blob对象中读出其包含的数据。
Blob.text()：返回一个promise且包含blob所有内容的UTF-8格式的 USVString。

  const data = { hello: 'world' };
   const blob = new Blob([JSON.stringify(data, null, 2)], {type : 'application/json'});
   blob.text().then( text => console.log(text))

image.png

注意： text为string类型。
除此之外还有Blob.arrayBuffer()、Blob.stream()

responseType属性设置为“blob”
将二进制文件读取为blob类型的数据

2、File API

File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件，提供有关文件的信息，并允许网页中的 JavaScript 访问其内容

File()
返回一个新构建的文件对象（File）

更多File文件内容参见我的另一篇文档由浅入深了解文件操作

三、其他方法

获取一张图片的宽高

export default function getUploadImgSize(file) {
  return new Promise(resolve => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function(e) {
      const result = e.target.result
      const img = new Image()
      img.src = result
      img.onload = function() {
        resolve({
          width: img.width,
          height: img.height,
        })
      }
    }
  })
}

参考资料

1、MDN - Blob

hi~ 点赞了么~~