html5 的 download 属性，居然不支持跨域！！！ W3C 设计者脑袋是咋想的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2291 天前的主题，其中的信息可能已经有所发展或是发生改变。

一张图片，希望实现点击即可下载到本地，第一反应就是 img 标签外面套个 a 标签加个 download 属性，但是，download 属性不支持跨域，现在只要是专业一点的网站，应用服务器和静态存储服务器都是分开的，你这个 download 属性不支持跨域给谁用，W3C 设计者难道没有一点 web 开发经验吗？

如果不动 nginx，怎样用 js 以最简单的方式点击即可下载图片？

Download

属性

W3C

设计者

21 条回复 • 2018-10-06 13:20:01 +08:00

newbieRenew

2018-09-19 10:28:50 +08:00

转成 base64 下载即可

wu67

2018-09-19 10:38:33 +08:00

创建一个 a, 加 href, 然后手动触发 click . 几年前写过这样一个油猴脚本

alwayshere

2018-09-19 10:42:07 +08:00

@wu67 我是想实现下载到本地的功能，而不是新标签页打开这张图片

SimbaPeng

2018-09-19 10:49:17 +08:00

跨域策略是浏览器的限制，关 w3c 吊事

whypool

2018-09-19 10:54:58 +08:00

又是你，截图的解决了？

wu67

2018-09-19 10:56:29 +08:00

https://github.com/wu67/userscript/blob/master/auto_download_MagnetURI/auto_download_MagnetURI.user.js#L44

Sparetire

2018-09-19 11:06:22 +08:00

又是我比 W3C 聪明系列...恰恰相反, 标准委员会的人比大部分 web 开发者的 web 开发经验更为丰富, 也因此他们考虑更多的细节.
另外这东西是浏览器厂商先实现的, 和 W3C 其实并没有什么关系
https://bugzilla.mozilla.org/show_bug.cgi?id=874009
https://www.chromestatus.com/feature/4969697975992320
https://github.com/whatwg/html/issues/2562
https://bugs.chromium.org/p/chromium/issues/detail?id=714373
https://stackoverflow.com/questions/49474775/chrome-65-blocks-cross-origin-a-download-client-side-workaround-to-force-down

tinytin

2018-09-19 13:38:00 +08:00 via iPhone

后端设置跨域头

KuroNekoFan

2018-09-19 14:14:06 +08:00

scp 是个很重要又很简单的安全策略，这都要喷？

KuroNekoFan

2018-09-19 14:14:23 +08:00

打错，sop

nyse

2018-09-19 14:49:10 +08:00

@whypool #5 这用户名也是很应景，alwayshere...

connection

2018-09-19 18:40:01 +08:00

支持跨域
alwayshere: html5 的 download 属性，居然支持跨域！！！ W3C 设计者脑袋是咋想的？

duan602728596

2018-09-19 19:56:08 +08:00 via iPhone

放过浏览器吧

xiangyuecn

2018-09-19 20:24:04 +08:00

要求放低点，有 download 属性的点击一般都会下载，如果跨域你可能不会采用你的文件名。解决办法：把图片文件名和要下载的文件名统一用一个。

终极办法：用 xhr 把图片(设置好 Access-Control-Allow-Origin)数据下载下来拿到 blob 对象，然后上通用下载大法：

var url=URL.createObjectURL(
new Blob(["abcd"],{"type":"text/plain"})
);
var downA=document.createElement("A");
downA.href=url;
downA.download="data.txt";
downA.click();

抄自：/t/488694#reply12