I am making a simple window.location.href call to start a file download. After that, I call a method to reload a table.
window.location.href = url;
this.getFileListing();
But the reload is too fast, because the href creates a database record.
Adding a 1 second timeout fixes it:
window.location.href = url;
setTimeout(() => {
this.getFileListing();
}, 1000);
...but that's sloppy. How do I wait for the download to start (thus the database record will exist) before I call the reload?
*Note: the location of the window does not change. I am just using windows.location.href to call a local route, which starts downloading a file. Therefore, I do not believe popstate or hashchange will work.
instead of launch download with window.location.href for vue you can use axios to download a file and use then method on promise to launch the needed method
axios({
url: url,
method: 'GET',
responseType: 'blob'
.then(response => (this.getFileListing()))
If you are using jQuery you can try something equivalent with jquery get https://api.jquery.com/jquery.get/
var instance = this;
$.get("fileToDownload", function() {
//code when download is launch
}).done(function() {
instance.getFileListing();
})
My solution: to use axios and a LOT of code to grab the response, and pass it to the browser. I had to parse out the original filename. Not sure if it was worth it. I actually put the functions in a mixin so I could add it easily to other components.
downloadToBrowser(url, successCallback) {
axios({
method: 'GET',
url: url,
responseType: 'blob'
})
.then(response => {
this.startDownload(response);
successCallback();
});
},
startDownload(response) {
var filename = response.headers['content-disposition'].split('=')[1];
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
},
Then call the method, passing in the url and callback:
this.downloadToBrowser(url, this.getFileListing);
*If you have any comments about something I could do better/differently, I welcome the feedback.