一张图片,希望实现点击即可下载到本地,第一反应就是 img 标签外面套个 a 标签加个 download 属性,但是,download 属性不支持跨域,现在只要是专业一点的网站,应用服务器和静态存储服务器都是分开的,你这个 download 属性不支持跨域给谁用,W3C 设计者难道没有一点 web 开发经验吗?
如果不动 nginx,怎样用 js 以最简单的方式点击即可下载图片?
一张图片,希望实现点击即可下载到本地,第一反应就是 img 标签外面套个 a 标签加个 download 属性,但是,download 属性不支持跨域,现在只要是专业一点的网站,应用服务器和静态存储服务器都是分开的,你这个 download 属性不支持跨域给谁用,W3C 设计者难道没有一点 web 开发经验吗?
如果不动 nginx,怎样用 js 以最简单的方式点击即可下载图片?
|
newbieRenewSep 19, 2018
1
转成 base64 下载即可
|
|
wu67Sep 19, 2018
2
创建一个 a, 加 href, 然后手动触发 click . 几年前写过这样一个油猴脚本
|
|
3
@wu67 我是想实现下载到本地的功能,而不是新标签页打开这张图片
|
|
4
跨域策略是浏览器的限制,关 w3c 吊事
|
|
5
又是你,截图的解决了?
|
|
wu67Sep 19, 2018
6
|
|
7
又是我比 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 |
|
tinytinSep 19, 2018 via iPhone
8
后端设置跨域头
|
|
9
scp 是个很重要又很简单的安全策略,这都要喷?
|
|
KuroNekoFanSep 19, 2018
10
打错,sop
|
|
12
支持跨域
alwayshere: html5 的 download 属性,居然支持跨域!!! W3C 设计者脑袋是咋想的? |
|
duan602728596Sep 19, 2018 via iPhone
13
放过浏览器吧
|
|
xiangyuecnSep 19, 2018
14
要求放低点,有 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 |
|
designerSep 19, 2018 via iPhone
15
W3C 设计者脑袋 在你这个天才面前都锈到了
|
|
lukunlinSep 20, 2018
16
哥们多查下百度吧。
这是有办法解决的,无论是外部的还是本地的图片,读取到了以后转成一个 base64,然后把里面的格式替换一下,再给 a 标签,就可以了。 |
|
v2ezjiangjySep 20, 2018
18
长按保存了解一下
|
|
daliebaOct 6, 2018 via Android
20
|
|
daliebaOct 6, 2018 via Android
21
打开上面链接以后看到名字带 CORS 的就是帮你跨域的扩展
|