由于不同的浏览器兼容不同,对于直接a标签下载文件,有的浏览器可以,有的浏览器会直接播放。
为了保证下载操作的正确执行,需要做一些额外的操作。
这个操作就是a标签的download属性。
定义和用法
download 属性规定被下载的超链接目标。
在 <a> 标签中必须设置 href 属性。
该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。
如<a href="/images/myw3schoolimage.jpg" download="w3logo">
可以保证下载操作,同时还可以修改文件名。
但是,问题是不支持跨域文件下载。
为了满足跨域文件的下载,还得做另一些额外的操作。
这个操作就是通过blob转换。以axios为例,
axios({
url: 'http://api.dev/file-download',
method: 'GET',
responseType: 'blob', // important
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.pdf'); //or any other extension
document.body.appendChild(link);
link.click();
});
首先将数据请求下来,然后再转换成对象直接另存为文件。
完美解决。