【问题标题】:html5 <a download> force "save as" dialoguehtml5 <a 下载> 强制“另存为”对话框
【发布时间】:2017-03-23 04:03:31
【问题描述】:

<html>
  <body>
    <a href="https://www.google.com.ua/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" download> download</a>
  </body>
</html>

你好!有什么建议可以强制使用不带 .htaccess 的图像进行另存为对话?

【问题讨论】:

  • 嘿,你在标题中拼错了“as”。可能想解决这个问题,如果你不这样做,有人可能会标记你的问题。
  • @AnishGoyal ty,我有点困了
  • @JaromandaX 它看起来像太重的解决方案
  • 这是一个浏览器 (chrome ? ) 功能。您的用户可以根据需要对其进行配置。 i.stack.imgur.com/BvOD8.png 甚至 FileSaver.js 对此也无能为力...

标签: javascript html


【解决方案1】:

这是一个浏览器 (chrome ? ) 功能。

您的用户可以根据需要对其进行配置。

您甚至 FileSaver.js 都无能为力...

【讨论】:

    【解决方案2】:

    改编自帖子: force browser to download image files on click

    由于 html5 的“下载”属性仍然只适用于兼容的浏览器。 (根据@RichardParnaby-King 的answer

    你可以试试:

    var link = document.createElement('a');
    link.href = 'images.jpg';
    link.download = 'Download.jpg';
    document.body.appendChild(link);
    link.click();
    

    (感谢@DrowsySaturn 的answer) 还值得一提的是,由于是JS,一些老版本的浏览器是不支持的。

    由于每个浏览器都有自己处理链接的方式,通常浏览器会在标签上的 URL 指定时显示图像,而不是自动下载它们。这旨在通过download attribute in HTML5 进行纠正,但显然有些浏览器尚未实现(有些可能永远不会实现)。

    PS:请先尝试搜索您的问题,以防止重复!

    【讨论】:

    • 你试过测试吗? jsfiddle.net/ezsk8bvb 仍然没有运行“另存为”对话框。
    • @УнгамистДолматов 您使用什么浏览器和版本? jsfiddle.net/ezsk8bvb/1 为我工作(Chrome 57.0.2987.110(64 位))。
    • 您混淆了特定链接是否代表要下载的文件的问题,以及应用程序是否可以强制“另存为...”对话框(它不能)的问题。
    【解决方案3】:

    最可靠的方法是在服务器端强制它。

    为方便起见,浏览器会以特定方式自动处理特定内容。特别是,浏览器将通过内联显示图像来自动处理图像,这是您要避免的。

    浏览器如何知道这是一张图片,而不是其他一些内容。服务器发送一个标头来说明这一点。对于 png 图片,服务器会发送如下内容:

    Content-Type: image/png.

    诀窍是让服务器也发送处理内容的首选方法。在您的情况下,您需要这样的标题:

    Content-disposition: attachment; filename=…

    这将告诉浏览器下载它。

    执行此操作的简单 PHP 脚本如下所示:

    //  assuming png
    $filename=@_GET['filename'];
    $data=file_get_contents($filename);
    header("Content-disposition: attachment; filename=$filename");
    header('Content-type: image/png');
    print $data;
    

    【讨论】:

      【解决方案4】:

      @Kaiido的评论解决:

      这是一个浏览器 (chrome ? ) 功能。您的用户可以将其配置为 他希望。 i.stack.imgur.com/BvOD8.png 甚至 FileSaver.js 都做不到 关于它的任何东西......

      大多数基于 chrome 的浏览器(在我的例子中是 Opera)默认启用此选项。

      【讨论】:

      • 酷,很高兴你解决了它。如果默认情况下启用了该选项,为什么它之前不要求您保存?
      猜你喜欢
      • 2021-08-20
      • 2021-12-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-11
      相关资源
      最近更新 更多