2

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!

nikiforovpizza
  • 487
  • 1
  • 7
  • 13
techdreams
  • 5,371
  • 7
  • 42
  • 63
  • 1
    It means you expect Binary data back from the Server. – StackSlave Aug 18 '16 at 00:17
  • 1
    `jQuery.ajax()` does not return `Blob` response by default. – guest271314 Aug 18 '16 at 00:26
  • then what do i need to do. Normal html was also behaving the same way – techdreams Aug 18 '16 at 00:27
  • @guest271314 is that an issue with blob that my pdf is getting generated with no content in it. – techdreams Aug 18 '16 at 00:27
  • 1
    Have you tried using `XMLHttpRequest()` with `responseType` set to `Blob`? – guest271314 Aug 18 '16 at 00: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 Aug 18 '16 at 00:36
  • Possible duplicate of [What is a JavaScript Blob object, why is it useful?](http://stackoverflow.com/q/29055587/1529630) – Oriol Aug 18 '16 at 00:43
  • See also http://stackoverflow.com/questions/12876000/how-to-build-pdf-file-from-binary-string-returned-from-a-web-service-using-javas/ – guest271314 Aug 18 '16 at 00:55

2 Answers2

1

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)
});
guest271314
  • 1
  • 15
  • 104
  • 177
1

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();
Community
  • 1
  • 1
existenzial
  • 98
  • 7