Blob解析二进制的文件流，下载文件

什么是Blob

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

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

二进制大对象(BLOB)是一种可以存储二进制对象或数据的数据类型。二进制大对象在数据库中用于存储二进制数据，如图像、多媒体文件和可执行软件代码。二进制大对象也可以称为基本大对象。

如何通过Blob下载

FileSaver.js 是一个HTML5 saveAs（）FileSaver库。

目前github已拥有16.4K的星星。

兼容性：

使用方法

使用保存文字

var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

Saving URLs

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

在相同来源内使用URL只会使用a[download]。否则，它将首先检查它是否支持带有同步头请求的cors头。如果是这样，它将下载数据并使用Blob URL保存。如果没有，它将尝试使用下载它a[download]。

标准的W3C File APIBlob接口并非在所有浏览器中都可用。 Blob.js是Blob解决此问题的跨浏览器实现。

Import saveAs() from file-saver

import { saveAs } from 'file-saver';

FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })

安装

# Basic Node.JS installation
npm install file-saver --save
bower install file-saver

Additionally, TypeScript definitions can be installed via:

# Additional typescript definitions
npm install @types/file-saver --save-dev

jsdelivr cdn

https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js

个人觉得fileSaver.js就是一个前端下载blob 的利器。mark 起来。

扩展

FileSaver.js是在客户端保存文件的解决方案，非常适合在客户端上生成文件的Web应用程序。但是，如果文件来自服务器，我们建议您首先尝试使用Content-Disposition附件响应标头，因为它具有更多的跨浏览器兼容性。

该文档总结了下载Blob 的四种方式

1. 使用http header

Content-Disposition附件标头是从浏览器下载文件的最佳首选方式。它具有更好的跨浏览器兼容性，没有任何内存限制，并且不需要任何JavaScript。

Content-Type: application/octet-stream 使浏览器与呈现页面不兼容，因此浏览器的后备解决方案是节省资源。

Content-Length 是可选的，使用它可以使用户在进度栏中还剩下多少。

Content-Type: 'application/octet-stream; charset=utf-8'
Content-Disposition: attachment; filename="filename.jpg"; filename*="filename.jpg"
Content-Length: <size in bytes>

2.使用表单元素（上传数据和使用其他http方法）

如果文件是使用POST请求生成的，或者您必须上载需要转换的内容。那么您可能会认为您不仅可以导航到资源，而且实际上可以使用一个简单的<form>元素来更改http方法，而change tre编码可以上传和下载需要同时转换的文件。

如果您曾使用AJAX请求Blob并创建了objectURL，则您已经失去了他们查看下载进度或为他们提供取消下载方式的能力

3.使用 a[download]

<a href="uploads/cat.png" download="cat.png">download cat.png</a>

此属性指示浏览器下载URL而不是导航到URL，因此将提示用户将URL保存为本地文件。如果属性具有值，则将其用作“保存”提示中的预填充文件名（用户仍然可以根据需要更改文件名）。尽管将/和\转换为下划线，但对允许的值没有任何限制。大多数文件系统在文件名中都限制了一些标点符号，浏览器会相应地调整建议的名称。

笔记：

• 此属性可以与blob：URL和数据：URL一起使用，以下载由JavaScript生成的内容，例如在图像编辑器Web应用程序中创建的图片。
• 如果HTTP标头Content-Disposition：提供的文件名与此属性不同，则HTTP标头的优先级高于此属性。
• 如果将Content-Disposition：设置为内联，则Firefox会像文件名一样优先处理Content-Disposition，而Chrome会优先考虑download属性。

4.使用Ajax + FileSaver

背景

如果出于某种原因，您需要一些标头（例如身份验证）来下载远程文件。然后，ajax可能是前进的唯一途径。如果您要定位的浏览器不支持下载属性，或者无法从后端服务器添加内容配置，也是如此。

您可以添加请求标头并修改响应标头以包括content-disposition标头的一种方法是通过Service Worker，但我想并不是每个人都会付出更多的努力。除非您使用StreamSaver.js，否则这是StreamSaver工作方式的核心方法。它基本上模仿了服务器保存文件所要做的事情

所有请求中的重要一件事是将响应作为Blob获得。之后不要构造Blob，请将responseType设置为Blob或在获取中使用.blob()代替.text()

使用blob时，它告诉浏览器不要解析文本内容，并让字节未经处理地传递。如果下载二进制数据，则从textContent创建blob是有问题的