Properly Create and Serve PDF Blob via HTML5 File and URL APIs

by

jQuery.ajax does not currently support blobs, see this bug report #7248 which is closed as wontfix.

However it’s easy to do XHR for blobs without jQuery:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf', true);
xhr.responseType="blob";

xhr.onload = function(e) {
  if (this.status == 200) {
    // Note: .response instead of .responseText
    var blob = new Blob([this.response], {type: 'application/pdf'}),
        url = URL.createObjectURL(blob),
        _iFrame = document.createElement('iframe');

    _iFrame.setAttribute('src', url);
    _iFrame.setAttribute('style', 'visibility:hidden;');
    $('#someDiv').append(_iFrame)        
  }
};

xhr.send();

Shamelessly copied from HTML5rocks.

If jQuery did support the Blob type, it could be as simple as:

$.ajax({
  url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf',
  dataType:'blob'
})...

More Related Contents:

  1. Generating HTML file using javascript and using correct MIME types like “text/html”
  2. How to get a file or blob from an object URL?
  3. HTML5 File API read as text and binary
  4. How to download a file without using element with download attribute or a server?
  5. How to convert Base64 String to javascript file object like as from file input form?
  6. Reading uploaded text file contents in html
  7. How to use Javascript to read local text file and read line by line?
  8. How to get file name when user select a file via ?
  9. Javascript in html write to file
  10. How to save and edit a file using JavaScript?
  11. HTML5 File api, reading in an xml/text file and displaying it on the page?
  12. How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
  13. How to submit an HTML form without redirection
  14. Is there a DOM event that fires when an HTML select element is closed?
  15. How do I remove tinyMCE and then re-add it?
  16. How to find the width of a div using vanilla JavaScript?
  17. play .wav sound file encoded in base64 with javascript
  18. Animated gif only loops once in Chrome and Firefox
  19. Why is the variable holding the input value always logged as empty?
  20. How to ONLY trigger parent click event when a child is clicked
  21. append option to select menu?
  22. How can I detect when a new element has been added to the document in jquery?
  23. How can I add multiple sources to an HTML5 audio tag, programmatically?
  24. jQuery: trigger a hover event from another element
  25. Fire oninput event with jQuery
  26. Save many canvas element as image
  27. How can I determine the background image URL of a div via JavaScript?
  28. How does inline Javascript (in HTML) work?
  29. Use of Template with HTML Custom Elements
  30. onclick=”location.href=’link.html'” does not load page in Safari

Leave a Comment