2

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();
Improve this question
0

3 Answers 3

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.com/easylist/easylist/commit/e3276b6ff9611e821d0e8ba7ac4dc336a4e3b765

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Fixed it for me!
0

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.

Improve this answer

1 Comment

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

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); } }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.