Chrome blocks a Blob object when downloading as PDF

Question

I have created a small piece of script that calls an API to get a PDF and sends the responseType as arraybuffer.

Using this I create a new Blob and set the type as 'application/pdf'

To force this to download I create an anchor element, pass it the blob and click it.

This works fine locally and on other browsers on my test servers but on Chrome I get Failed - No file in the download bar.

The PDF is definitely available as I can paste the url to the API into a tab and see it and the response from the original API call is passed to the Blob.

Sample Code

var fileName = 'dummyFilename-' + offerId + '.pdf';
var blob = new window.Blob([resData], { type: 'application/pdf' });

var anchorElement = document.createElement('a');
var url = window.URL.createObjectURL(blob);

document.body.appendChild(anchorElement);
anchorElement.id = 'anchorElement';
anchorElement.hidden = 'true';
anchorElement.href = url;

if (typeof anchorElement.download !== 'undefined') {
    anchorElement.download = fileName;
} else {
    anchorElement.target = '_blank';
}

anchorElement.click();

score 5 · Answer 1 · answered Sep 11 '18 at 15:23

5

Do you have an ad-blocker extension like uBlock Origin? If so, it could be blocking all blob URLs in popup windows/tabs. Easylist is doing this by default:

https://github.com/easylist/easylist/commit/e3276b6ff9611e821d0e8ba7ac4dc336a4e3b765

In my case, I disabled uBlock Origin for my website and it worked.

answered Sep 11 '18 at 15:23

AsGoodAsItGets

2,886
34
49

Fixed it for me! – Venryx May 07 '21 at 00:13

score 0 · Answer 2 · edited May 23 '17 at 12:34

Forcing this is always a bit hacky...:

If the HTML element that you are clicking on to execute that function is a link, you may want to try to add a download attribute:

<a href="path/to/your/file.pdf" download>Download PDF</a>

You can rename it if you want:

<a href="path/to/your/file.pdf" download="downloaded-pdf-name.pdf">Download PDF</a>

If you are using that solution to make that work in other browsers, where the download attribute won't work, your click event handler should look something like this:

document.getElementById('#download-pdf').onclick = function (event) {
    if (!"download" in document.createElement("a")) {
        // Download is NOT supported, the browser is probably not Chrome
        // You don't want the native behaviour, which will probably open
        // the PDF in another tab, so:
        event.preventDefault();

        // TODO: Adapt your code to execute from here...
    }
}

However, that download check may not work in Firefox. Check the comments in the answer here: How to detect support for the HTML5 "download" attribute?

If you have that option, I would advise you to set Content-Disposition = 'attachment; filename=downloaded-pdf-name.pdf' in the HTTP response header. Check here to see specific ways to do it in different backends.

Actually I found that I really only needed Blob to get the PDF to download in IE. In the end I just pointed the click to a normal URL with a download attribute set to force this with a new tab opening for browsers that don't support this. I'm still not sure why Chrome wasn't handling the Blob correctly though. — Scott Francis, Aug 03 '16 at 14:47

score 0 · Answer 3 · answered Jan 23 '18 at 11:36

Did you tried this? (without creating a element)... I hope it helps

var fileName = 'dummyFilename-' + offerId + '.pdf';
var blob = new window.Blob([resData], { type: 'application/pdf' });
// Parse blob object to base64 to prevent chrome blocking:
var reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
    base64data = reader.result;
    // For IE:
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(base64data);  
    } // For webkit
    else {
        var objectUrl = URL.createObjectURL(base64data);
        window.open(objectUrl);  
    }
}

Chrome blocks a Blob object when downloading as PDF

3 Answers3