0

I am trying to download a PDF file (which requires a Bearer token, so I cannot just open a new tab with the given URL) and then open it in a new tab. I've gotten this to work in every browser except Firefox. In Firefox, the tab opens, but upon trying to navigate to the blob URL, the tab closes. If I copy and paste the blob URL into a new tab manually, it loads the PDF correctly.

Below is the code I am using (the dollar signs are from Angular 1):

showReceipt: function(receiptUrl) {
    var windowReference;
    if (!($window.navigator && $window.navigator.msSaveOrOpenBlob)) {
        // This is the workaround for Safari: https://stackoverflow.com/a/39387533/2595915
        // It also works in Chrome, but not in IE and Edge
        // We open the new window in an if block to avoid opening a useless blank tab in IE/Edge
        windowReference = $window.open();
    }
    api.request('GET', receiptUrl, {}, {}, { useUrl: true, successHandler: api.blobSuccessHandler, responseType: 'blob' }).then(
        function (blob) {
            // It is necessary to create a new blob object with mime-type explicitly set
            // otherwise only Chrome works like it should
            var newBlob = new Blob([blob], { type: 'application/pdf' });

            // IE and Edge don't allow using a blob object directly as link href;
            // instead it is necessary to use msSaveOrOpenBlob
            if ($window.navigator && $window.navigator.msSaveOrOpenBlob) {
                $window.navigator.msSaveOrOpenBlob(newBlob);
                return;
            }

            var data = $window.URL.createObjectURL(newBlob);
            windowReference.location.href = data; // Causes the tab to close
            console.log(data); // Copy and pasting this URL works, assuming I comment out the revoke command below
            $timeout(function () {
                $window.URL.revokeObjectURL(data);
            }, 100);
        }
    );
}

I have also tried programmatically creating a temporary a element and clicking that, and I get the same results (tab immediately closes in Firefox, works fine in Chrome).

NeuroXc
  • 652
  • 6
  • 22
  • pop up blocker? – epascarello Apr 02 '18 at 14:22
  • I've made sure the popup blocker is disabled. I can even do e.g. `windowReference = $window.open(); windowReference.location.href = 'https://google.com';` in the `if` block at the top. It seems like the issue is related to trying to set the location in the async response block. – NeuroXc Apr 02 '18 at 14:24
  • I think it's intentional behavior for Firefox to block data URLs in situations like that, and [Chrome may start blocking those too](https://productforums.google.com/forum/#!topic/chrome/wvYYcBwJ9FA). Also Edge I think. – Pointy Apr 02 '18 at 14:29
  • ... except you're almost certainly on newer Chrome than that. I had come across a better reference recently but I haven't found it yet. – Pointy Apr 02 '18 at 14:32
  • Yes, I'm on Chrome 65 and Firefox 59. I'm almost tempted to just modify the backend service to accept the Bearer token as a query string parameter, but that's a dirty workaround rather than a proper solution. – NeuroXc Apr 02 '18 at 14:38
  • One workaround I've seen is to write an ` – Pointy Apr 02 '18 at 14:45
  • 1
    [Workaround possibility](https://ourcodeworld.com/articles/read/682/what-does-the-not-allowed-to-navigate-top-frame-to-data-url-javascript-exception-means-in-google-chrome) – Pointy Apr 02 '18 at 14:45
  • That did work. It's not ideal but I'm much happier with that than with the download not working in Firefox. – NeuroXc Apr 02 '18 at 15:10

0 Answers0