文件下载

由于不同的浏览器兼容不同,对于直接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();
});

首先将数据请求下来,然后再转换成对象直接另存为文件。

完美解决。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容