Jquery中使用的Blob是什么答案

【问题标题】：What is a Blob used in JqueryJquery中使用的Blob是什么
【发布时间】：2016-12-24 18:52:09
【问题描述】：

我在 jQuery 中搜索一些东西时遇到了blob。谷歌了一下，但无法确切地弄清楚它是什么概念。

我找到了通过 Ajax 下载 pdf 文件的代码。

$.ajax({
    method: 'GET',  
    dataType: 'blob',
    data: { report_type: report_type, start_date: start_date, end_date: end_date, date_type: date_type },
    url: '/reports/generate_pdf.pdf',
        success: function(data) {
            var blob=new Blob([data]);
            var link=document.createElement('a');
            link.href=window.URL.createObjectURL(blob);

            link.download="Report_"+new Date()+".pdf";
            link.click();
            console.log("pdf printed");
        }
});

此代码运行良好，但打印空 pdf 时没有静态或动态内容。但是有一个奇怪的行为。 IE。如果计算的动态数据太大，则生成多个页面。

我只是想弄清楚blob 的概念，以便我自己弄清楚这段代码在做什么以及blob 是如何工作的。

任何适当的指导或帮助将不胜感激。提前致谢！

【问题讨论】：

这意味着您希望从服务器返回二进制数据。
jQuery.ajax() 默认不返回Blob 响应。
那我需要做什么。普通 html 的行为方式也相同
您是否尝试过使用XMLHttpRequest() 并将responseType 设置为Blob？
很可能是从数据库（或文件系统）中检索 blob 作为字节数组。在这种情况下，它是您的 pdf 或 word 文档，但可以是用于生成图像、音频等的任何二进制数据数组。确保您从 generate_pdf.pdf 脚本（或任何可能被修改的地方）返回正确的 mime 类型服务器）并且您已获得正确的编码。

标签： javascript jquery blob

【解决方案1】：

这在另一篇文章中也有引用 - 请参阅 this Stack Overflow post。

BLOB 代表 Binary Large OBject。可以把它想象成存储在 SQL 数据库中的二进制数据的集合。

BLOB 可以存储图像、视频和音频等多媒体内容，但它实际上可以存储任何类型的二进制数据。由于 BLOB 的默认长度不是标准的，因此您可以将每个 BLOB 的存储容量定义为任意长度，最长可达 2,147,483,647 个字符 - 请参阅 MariaDB 文档中的 here 示例。

由于 jQuery 没有处理 blob 的方法，您可以尝试使用原生 Blob 接口。来自MDN's documentation：

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function(oEvent) {
  var blob = new Blob([oReq.response], {type: "image/png"});
  // ...
};

oReq.send();

【讨论】：

【解决方案2】：

见5. The Blob Interface and Binary Data

Blob 对象引用一个字节序列，并具有size 属性这是字节序列中的总字节数，type 属性，这是一个小写的 ASCII 编码字符串，表示字节序列的媒体类型。

jQuery.ajax() 没有默认将dataType 设置为Blob 的选项，请参阅Add support for HTML5 XHR v2 with responseType set to 'arraybuffer' on $.ajax

您可以使用XMLHttpRequest() 或fetch() 将response 设置为Blob 或ArrayBuffer。

var request = new XMLHttpRequest();
request.open("GET", "/path/to/resource");
request.responseType = "blob";
request.onload = function() {
  // do stuff `this.response`:`Blob`
  console.log(this.response)
}
request.send();

fetch("/path/to/resource")
.then(function(response) {
  return response.blob()
})
.then(function(blob) {
  // do stuff with response
  console.log(blob)
});

【讨论】：