文件下载

2018-08-21  本文已影响30人  anjohnlv

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

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

完美解决。

上一篇 下一篇

猜你喜欢

热点阅读