I came across blob while searching some stuff in jQuery. Googled about it but could not exactly figure out what kind of concept it is.

I found this code for downloading a pdf file through Ajax.

$.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");
        }
});

This code is working fine but printing empty pdf without the content either static or dynamic. But with a strange behaviour. I.e. if the dynamic data calculated is too big, it is generating multiple pages.

I just want to figure out the concept of blob so that I can figure out myself what this piece of code is doing and how does blob work.

Any proper guide or help would be really appreciated. Thanks in advance!

I came across blob while searching some stuff in jQuery. Googled about it but could not exactly figure out what kind of concept it is.

I found this code for downloading a pdf file through Ajax.

$.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");
        }
});

This code is working fine but printing empty pdf without the content either static or dynamic. But with a strange behaviour. I.e. if the dynamic data calculated is too big, it is generating multiple pages.

I just want to figure out the concept of blob so that I can figure out myself what this piece of code is doing and how does blob work.

Any proper guide or help would be really appreciated. Thanks in advance!

• javascript
• jquery
• blob

• 1 It means you expect Binary data back from the Server. – StackSlave Commented Aug 18, 2016 at 0:17
• 1 jQuery.ajax() does not return Blob response by default. – guest271314 Commented Aug 18, 2016 at 0:26
• then what do i need to do. Normal html was also behaving the same way – techdreams Commented Aug 18, 2016 at 0:27
• 1 Have you tried using XMLHttpRequest() with responseType set to Blob? – guest271314 Commented Aug 18, 2016 at 0:28
• 1 More than likely that is retrieving a blob as a byte array from a database (or file system). In this case it's your pdf or word document, but could be any array of binary data to generate images, audio, etc. Make sure you're returning the correct mime type from your generate_pdf.pdf script (or wherever it may be modified by the server) and that you've got proper encoding. – vol7ron Commented Aug 18, 2016 at 0:36

2 Answers 2

This is referenced in another post as well - See this Stack Overflow post.

A BLOB stands for a Binary Large OBject. Think of it like a collection of binary data stored in SQL databases.

A BLOB can store multimedia content like Images, Videos, and Audio but it can really store any kind of binary data. Since the default length of a BLOB isn't standard, you can define the storage capacity of each BLOB to whatever you'd like up to 2,147,483,647 characters in length - See an example of this here in MariaDB's docs.

Since jQuery doesn't have a way to handle blob's, you could try using the native Blob interface. From 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();

See 5. The Blob Interface and Binary Data

A Blob object refers to a byte sequence, and has a size attribute which is the total number of bytes in the byte sequence, and a type attribute, which is an ASCII-encoded string in lower case representing the media type of the byte sequence.

jQuery.ajax() does not have an option to set dataType to Blob by default, see Add support for HTML5 XHR v2 with responseType set to 'arraybuffer' on $.ajax

You can use XMLHttpRequest(), or fetch() to set response to Blob or 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)
});