download使用浅析

linong

先来介绍一下我们的主角download让我们有一个简单认识,图中我们可以看到a标签的download属性,他是用来指定可以下载,值是filename图片来源

clipboard.png

再来说说场景,网页上要下载东西,下载一个资源(软件.exe 、 压缩包.zip 、 图片.png 、 本文.txt ),我们通过url打开,发现有的可以下载,有的直接显示了,这就有点尴尬了。先说说为什么有的资源就直接显示了。这是因为浏览器发现他可以自己打开了,所以他就觉得他要显示比如你的 .png .txt .html。那如果我们要下载怎么办?

这种东西呢,一般就两个办法,一个前端控制,一个后端控制。

后端控制 新给你一个url,加个下载头。浏览器一看,哎呦这个东西是要下载的,不需要打开,他就直接下载了。这样的下载需要后端人员配合,这咔咔咔就改代码。

前端控制 a标签的Download属性,加上以后,就是下载资源,这个好,想下载什么下载什么,但是呢,这种好用的东西在前端一般都有问题,什么问题?兼容问题呗,FF不支持跨域下载,非跨域下是可以下载的-测试地址。跨域情况,chrome里面设置filename不好使-测试地址同上。当然,还有我们要兼容的ie。

//这样写成一个function可以让我们不用界面上放一个a标签,换成js触发。
a = document.createElement('a');
a.download = filename;
a.href = 'https://segmentfault.com';
// 触发点击
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
阅读 1.7k

javascript-lNong
只此一生,何必从众

Read-Search-Ask

22.8k 声望
4.8k 粉丝
0 条评论

Read-Search-Ask

22.8k 声望
4.8k 粉丝
文章目录
宣传栏