JavaScript创建下载文件之Blob和File

一、JavaScript创建下载文件之Blob和File

1、文件下载，过去一般由后端程序在服务器端生成文件，然后前端通过打开链接的方式从服务器端下载数据，而需要下载的文件在服务器上会有一个临时文件或者永久存在的文件。随着浏览器的发展和高级浏览器的普及，文件下载可以通过接口获取相应的文件流，然后在前端生成相应的下载文件和链接地址，这种方式一般在服务器端没有临时文件或者永久文件，而是将文件数据流存储在数据库中。

2、本文将介绍通过原生JavaScript生成文件和下载文件的方式。

3、对于使用文件，浏览器中有高级对象FileAPI，现在已经得到浏览器厂商的广泛支持。使用它创建一个文件非常的简单，File接口基于Blob，继承Blob功能并对其进行扩展以支持用户系统上的文件。如下：

4、数据数组：第一个参数，它可以是Blob、ArrayBuffer，或者字符串。

5、文件名：第二个参数为文件名称，包括文件后缀。

6、文件配置：这是一个可选参数，传递文件的实际类型。

7、为了生成一个文件，包含text/plain类型（文本、HTML、CSV等）数据的文件，生成更抽象的文件类型需要使用blob或缓冲区。

8、ArrayBuffer是ECMA标准的一部分，也可以说是JavaScript的一部分。在浏览器中生成文件，除了上面介绍的高级对象FileAPI中进行了描述，还有Blob。

9、Blob（BinaryLargeObject）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob通常是影像、声音或多媒体文件。在JavaScript中Blob类型的对象表示不可变的类似文件对象的原始数据。

10、Blob由一个可选的字符串类型（通常是MIME类型）和blobParts组成：其他Blob对象、字符串和BufferSource的序列。

11、blobParts：是Blob/BufferSource/String值的数组

12、type：Blob类型，通常是MIME类型，例如text/plain

13、endings：默认值为transparent，用于指定包含行结束符\n的字符串如何被写入。它是以下两个值中的一个：native，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者transparent，代表会保持blob中保存的结束符不变。

14、要检查创建文件是否有效，需要访问它，并进行下载。

15、实现的方式是生成一个包含对文件引用的链接。然后，让JavaScript出发时间click来点击链接，这样文件就可以下载了。

16、为了接收文件URL，需要使用URL.createObjectURL()方法将接收文件对象作为参数。然后，通过设置链接的下载属性，指定保存的文件默认名称。

17、最后，在DOM中挂载链接，单击它后，将其从DOM中删除。以下是完整的代码：

18、如果是通过接口的形式获取文件流并生成下载文件，就可以参照以下Vue代码片段：

二、js如何获取图片url的Blob值并预览示例代码

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

2、本文主要给大家介绍了关于js获取图片url的Blob值并预览的相关内容，下面话不多说了，来一起看看详细的介绍吧

3、1）使用 XMLHttpRequest对象获取图片url的Blob值

4、function getImageBlob(url, cb){

5、 var xhr= new XMLHttpRequest();

6、注意这里的XMLHttpRequest必须使用异步模式，同步模式不能设置 responseType="blob"

7、2）使用 FileReader对象获取图片 Blob对象的 data数据

8、 let reader= new FileReader();

9、 getImageBlob( url, function(blob){

10、 var img= document.createElement("img");

11、 document.body.appendChild(img);

三、blob类型是什么类型

1、Blob类型是一种二进制大对象类型。

2、Blob类型主要用于存储二进制数据，这些数据可以是文本文件、图片、音频或视频等任何类型的文件内容。Blob对象通常用于存储大量数据，这些数据在数据库中通常是以二进制形式存储的。这种数据类型特别适用于处理大型数据集或复杂文件格式的存储和传输。数据库管理系统常常提供Blob类型的字段来存储二进制数据。由于其特殊性，它可以被当作文件的存储空间来处理各种数据类型，这对于前端处理和服务器响应以及跨平台数据传输来说非常有用。另外，Blob类型的数据通常不会被直接解析或修改，而是直接作为二进制数据流进行操作或传输。这样能保证数据的完整性以及原数据的格式不会改变。在现代互联网应用中，尤其是涉及大量文件和数据处理的应用中，Blob类型的使用非常普遍。

3、具体到编程环境中，Blob对象通常可以通过JavaScript等脚本语言进行操作。例如，可以在浏览器端使用JavaScript创建Blob对象，然后将它用于文件下载、上传或其他涉及到二进制数据处理的场景。另外，在数据库操作中，特别是处理文件型数据时，也经常使用到Blob类型来存储和检索二进制数据。随着技术的发展和应用的深化，Blob类型的应用场景会越来越广泛。