How to download a PDF to a new tab/window without popup blocker?

Question

I have the following service call to download files from the server. I currently have it so that PDFs will open up in a new tab/window, and any other document types will be downloaded.

The problem I'm having right now is that the PDF is being prevented by a pop up blocker. Is there any way around this?

  return formService.getForm(params)
        .$promise
        .then(response => {
            var blob = new Blob([response.data], {
                type: response.responseType
            });
            var fileUrl = (window.URL || window.webkitURL).createObjectURL(blob);
            if (response.responseType === 'application/pdf') {
                window.open(fileUrl);
            } else {
                var a = document.createElement("a");
                document.body.appendChild(a);
                a.style = "display: none"
                a.href = fileUrl;
                a.download = formName;
                a.target = "_blank";
                a.click();
                window.URL.revokeObjectURL(fileUrl);
            }
        })
        .catch(error => {
            console.error(`Error downloading form '${formName}' `, error);
        });

Iceskate

You are forcing the click event, therefore popup blockers will suggest that this is not a user performed action. Have the user do the click action that opens the window and test again. – Redstone

Answer 1

I found an answer to my question via another stack overflow post.

window.open popup getting blocked during click event

Basically, i call var newWindow = window.open(); before I make the service call and then newWindow.location = fileUrl in the success callback.

Iceskate

Very good solution, I improved it with a timeout to close the new tab: setTimeout(function(){ newWindow.close(); }, 500); after the download (in my experience, if there is no timeout the new tab is closed before the download is started). – Consociate