After a long running server job, I need to automatically trigger a file download in my user's browser. I also have active websocket connections that I need to maintain in case the user is preforming different tasks in my web app. Originally I was doing this:
window.location.replace(downloadLink);
However, after that line executed I would miss websocket messages. This question deals with the same problem: On-Click A-tag with Href, socket gets disconnected
Then I tried this:
window.open(downloadLink, "_blank");
However this flashes a new tab open and closes it immediately. Its very jarring if the user was working on something else. I have also tried this:
axios.get(downloadLink, { responseType: "blob" }).then((response) => {
const fileURL = window.URL.createObjectURL(new Blob([response.data]));
const docUrl = document.createElement("a");
docUrl.href = fileURL;
docUrl.setAttribute("download", fileName);
document.body.appendChild(docUrl);
docUrl.click();
});
This works but it downloads the file in the background. This file is very large so I would like the user to be able to see download progress in the downloads bar at the bottom of the page.
Does anyone know how to download a file without disconnecting web-sockets or opening a new tab while still displaying the browsers file download progress?
