Utilizing the download
attribute signals to the browser that a file should be downloaded, but its effectiveness is not universal. Internet Explorer does not acknowledge it, and Chrome and Firefox may overlook it for cross-origin requests (CanIUse). Given that you are linking to resources from an external site, ensuring the a
tag enables downloads reliably proves challenging, even on browsers supporting this attribute.
If direct linking to the API poses concerns, consider attempting a Blob download directly from the API. A Github issue discussion outlines how this can be achieved, with a modified approach for implementation provided below:
download: function(url) {
let response = await Vue.http.get("http://api.smartsport.site/" + url, {responseType: 'arraybuffer'});
let blob = new Blob([response.data], {type:response.headers.get('content-type')});
let link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = this.name;
link.click();
}
Find more details at: https://github.com/pagekit/vue-resource/issues/285#issuecomment-359112845