V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
alwayshere
V2EX  ›  程序员

html5 的 download 属性,居然不支持跨域!!! W3C 设计者脑袋是咋想的?

  •  
  •   alwayshere · 2018-09-19 10:26:53 +08:00 · 8179 次点击
    这是一个创建于 2242 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    21 条回复    2018-10-06 13:20:01 +08:00
    newbieRenew
        1
    newbieRenew  
       2018-09-19 10:28:50 +08:00
    转成 base64 下载即可
    wu67
        2
    wu67  
       2018-09-19 10:38:33 +08:00
    创建一个 a, 加 href, 然后手动触发 click . 几年前写过这样一个油猴脚本
    alwayshere
        3
    alwayshere  
    OP
       2018-09-19 10:42:07 +08:00
    @wu67 我是想实现下载到本地的功能,而不是新标签页打开这张图片
    SimbaPeng
        4
    SimbaPeng  
       2018-09-19 10:49:17 +08:00   ❤️ 1
    跨域策略是浏览器的限制,关 w3c 吊事
    whypool
        5
    whypool  
       2018-09-19 10:54:58 +08:00   ❤️ 19
    又是你,截图的解决了?
    Sparetire
        7
    Sparetire  
       2018-09-19 11:06:22 +08:00   ❤️ 5
    又是我比 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
        8
    tinytin  
       2018-09-19 13:38:00 +08:00 via iPhone
    后端设置跨域头
    KuroNekoFan
        9
    KuroNekoFan  
       2018-09-19 14:14:06 +08:00   ❤️ 1
    scp 是个很重要又很简单的安全策略,这都要喷?
    KuroNekoFan
        10
    KuroNekoFan  
       2018-09-19 14:14:23 +08:00
    打错,sop
    nyse
        11
    nyse  
       2018-09-19 14:49:10 +08:00
    @whypool #5 这用户名也是很应景,alwayshere...
    connection
        12
    connection  
       2018-09-19 18:40:01 +08:00   ❤️ 1
    支持跨域
    alwayshere: html5 的 download 属性,居然支持跨域!!! W3C 设计者脑袋是咋想的?
    duan602728596
        13
    duan602728596  
       2018-09-19 19:56:08 +08:00 via iPhone
    放过浏览器吧
    xiangyuecn
        14
    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
    designer
        15
    designer  
       2018-09-19 21:32:52 +08:00 via iPhone
    W3C 设计者脑袋 在你这个天才面前都锈到了
    lukunlin
        16
    lukunlin  
       2018-09-20 08:37:44 +08:00
    哥们多查下百度吧。
    这是有办法解决的,无论是外部的还是本地的图片,读取到了以后转成一个 base64,然后把里面的格式替换一下,再给 a 标签,就可以了。
    demonzoo
        17
    demonzoo  
       2018-09-20 10:05:59 +08:00
    @wu67 求教,为什么模拟触发 click 事件就可以实现跨域下载??没想明白
    v2ezjiangjy
        18
    v2ezjiangjy  
       2018-09-20 10:17:21 +08:00
    长按保存了解一下
    wu67
        19
    wu67  
       2018-09-20 11:23:30 +08:00
    @demonzoo 这我也不懂, 我只是知道这样能用, 没去深入折腾原理
    dalieba
        20
    dalieba  
       2018-10-06 13:18:54 +08:00 via Android
    dalieba
        21
    dalieba  
       2018-10-06 13:20:01 +08:00 via Android
    打开上面链接以后看到名字带 CORS 的就是帮你跨域的扩展
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5344 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 07:38 · PVG 15:38 · LAX 23:38 · JFK 02:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.