Safari & Firefox download click cancels the next queued fetch call

29 Views Asked by At

Context:
Using FileSaver.js for downloading a PDF from a URL is opening the download link in a new tab in Safari & Firefox. The saveAs implementation in FileSaver.js is explicitly setting target="_blank". But I couldn't find the context behind FileSaver.js using target="_blank".

In Chrome, downloads are smooth and target="_blank" doesn't seem to impact any UX. In Firefox, I notice a little lag in auto closing the new tab after download is closed. But it's reasonable. But in Safari, the new tab doesn't close after the download is complete. So the users will see a blank page.

To fix this issue, I have used below code to force open the download link in same tab

const downloadObjectUrl = (objectUrl, filename) => {
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = objectUrl;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
};

The problem:
With above code, the downloads are working in same tab. BUT, any Fetch calls queued after are failing. In Safari, I don't see any useful error but in Firefox I see the error NS_BINDING_ABORTED on failed requests.

Please note, the download URL origin & the current web page origins are different.

I tried adding an onclick handled on the link to return false. It resolved issues in Firefox but the download isn't working in Safari any more.

a.onclick = (ev) => {
   return false;
};
0

There are 0 best solutions below