javascript - Chrome blocks a Blob object when downloading as PDF - Stack Overflow

admin管理员组

文章数量:1394403

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

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

• javascript
• google-chrome
• pdf
• blob

Share Improve this question Follow asked Aug 3, 2016 at 12:12 Scott FrancisScott Francis 5911 silver badge22 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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./easylist/easylist/mit/e3276b6ff9611e821d0e8ba7ac4dc336a4e3b765

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

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 ments 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.

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);  
    }
}

本文标签： javascriptChrome blocks a Blob object when downloading as PDFStack Overflow