Question

我在jQuery中搜索一些内容时遇到了blob。用Google搜索，但无法弄清楚它是什么样的概念。

我找到了通过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时内容不是静态或动态的。但是有一种奇怪的行为。即如果计算的动态数据太大，则会生成多个页面。

我只是想弄明白blob的概念，这样我就可以弄清楚这段代码在做什么以及blob如何工作。

任何适当的指导或帮助都会非常感激。提前谢谢！

Answer 1

请参阅5. The Blob Interface and Binary Data

Blob对象引用字节序列，并具有size属性这是字节序列中的总字节数，以及type attribute，以小写字母表示的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)
});

Answer 2

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

BLOB代表 B inary L arge OB ject。可以把它想象成存储在SQL数据库中的二进制数据集合。

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

由于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();

什么是Jquery中使用的Blob

2 个答案: