Angularjs - Firefox doesn't open blob url in new tab

Question

I have the following code working fine in Chrome and IE. The user clicks on the anchor tag and the code is launched, after which the pdf file is displayed on a new tab with the url block: http: // localhost: 57389 / 5aee262a-8bc9-4943-b67f-7b76aeef4b99

vme.loadAttachment = function (attachment) { taskService.getAttachmentContent(attachment.Name) .then(function (response) { var file = new Blob([response], { type: attachment.Type }); if (window.navigator && window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(file); } else { var objectUrl = URL.createObjectURL(file); window.open($sce.trustAsResourceUrl(objectUrl), _blank"); } }) }; 

However, in Firefox, a new tab opens, but immediately closes by itself. Any idea what could be causing this?

Answer 1

It happened to me today. I have several different VM snapshots that I use to test different "clients", and I got two of them where the PDF does not open - the browser briefly flashed and the PDF file did not appear.

After all, it was an ad unit (ABP). Just telling him to ignore the allowed PDF files of the website so that they display correctly.

Answer 2

Check your browser popup settings. This may be one of the problems.

Answer 3

I had the same problem: code working before (still working in chrome) no longer works. I think the problem is that firefox forbids opening blob urls with script, but I could not verify it. But if you try to execute window.open(myBlobUrl) from the console, you will see:

Error: access to 'blob: http: // localhost: 8000 / 53dc4cba-329a-4479-b685-d0257425b318 ' from script denied

Solution / Workaround

The only solution / workaround for me was to create a URL in the backend service that directly provides the PDF file.

Server

Add these http headers to a handler that responds to a URL with which you can access the PDF:

 Content-Disposition: inline; filename = filename.pdf Content-Type: application/pdf 

Angular View

 <a ng-href="{{ pathToPdf }}" target='_blank'>my link</a> 

Angular Controller

 $scope.pathToPdf = MyPdfService.getPdfUrl();