js 实现文件下载

发表于 分类于 阅读次数：

由于 js 无法对文件直接操作，所以通过 js 下载文件的原理是创建一个 标签，然后让其执行 click() 方法来进行下载。

具体代码如下：

1
2
3
4
5
6
// 假设 data 为后台返回的 ArrayBuffer
let link = document.createElement('a');
link.href = window.URL.createObjectURL(new Blob([data]));
link.download = file.name;
link.click();
window.URL.revokeObjectURL(str2ab(sm4_decrypt_str));

我们这里用到了 Blob 类，接下来就来讲一下 Blob 的用法。

Blob 介绍

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取。

要从其他非 blob 对象和数据构造一个 Blob，要使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob，使用 slice() 方法。

其实，File 就是 Blob 的一个子类，File 对象也是一个 Blob 对象。

我们上传文件时文件就是一个 File 对象或者是一个 Blob 对象。

构造函数
1
Blob(blobParts[, options])

这里有两个参数：

  • 第一个参数是要被构建成 Blob 的数据，是一个数组，通常为 ArrayBuffer 或 二进制流
  • 第二个参数是可选的选项，例如 { type: 'image/jpeg' }
属性

Blob.size：对象中所包含数据的大小（字节）。

Blob.type：一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。