a元素的download特性

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/01/29/a%E5%85%83%E7%B4%A0%E7%9A%84download%E7%89%B9%E6%80%A7/

摘要

本文主要讲述了：

作用
特性值
仿真实验

正文

作用

提示浏览器下载href，而不是跳转到href

注意：

理论上，该特性应该只在href的值为同源 URL、blob URL、data URL 时有效
经过测试，在不同的浏览器上，该特性的表现并不总是可靠的
如果该特性无效，那么浏览器将跳转到href

特性值

若download有值，那么浏览器会以它作为【另存为对话框】中的文件名（\和/会被转换成下划线）

若download没有值，那么浏览器会根据以下条件来生成【另存为对话框】中的文件名或文件扩展名：

Content-Disposition响应头中的filename指令
URL 中的最后片段，例如：a.example.com/test.png中的test.png
MIME 类型，例如：data:image/png;中的image/png

仿真实验

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <a href="./test.png" download>Download Same-Origin Image</a>
      <a href="./test.png" download="foo.png">Download Same-Origin Image</a>
      <a href="./test.txt" download>Download Same-Origin Text</a>
      <a href="./test.txt" download="foo.txt">Download Same-Origin Text</a>
      <a
        href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUCB1j+M/A8B8ABQAB/8gPYhYAAAAASUVORK5CYII="
        download
        >Download Base64 Image</a
      >
      <a
        href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUCB1j+M/A8B8ABQAB/8gPYhYAAAAASUVORK5CYII="
        download="bar.png"
        >Download Base64 Image</a
      >
      <a href="https://www.baidu.com/index.html" download
        >Download Cross-Origin Text</a
      >
      <a href="https://www.baidu.com/index.html" download="bar.html"
        >Download Cross-Origin Text</a
      >
      <a href="https://www.baidu.com/img/bd_logo1.png" download
        >Download Cross-Origin Image</a
      >
      <a href="https://www.baidu.com/img/bd_logo1.png" download="baidu.png"
        >Download Cross-Origin Image</a
      >
    </div>
    <style>
      #app a {
        display: block;
      }
    </style>
    <script>
      window.addEventListener('load', function () {
        const foo = document.createElement('a');
        foo.href = URL.createObjectURL(
          new Blob(['hello, jsweibo'], {
            type: 'text/plain',
          })
        );
        foo.textContent = 'Download Blob Text';
        foo.download = '';

        const bar = document.createElement('a');
        bar.href = URL.createObjectURL(
          new Blob(['hello, jsweibo'], {
            type: 'text/plain',
          })
        );
        bar.textContent = 'Download Blob Text';
        bar.download = 'test.txt';

        document.querySelector('#app').appendChild(foo);
        document.querySelector('#app').appendChild(bar);
        document.body.append(navigator.userAgent);
      });
    </script>
  </body>
</html>

实验结果

System	Browser Name	Browser Version	Result
Windows 10	IE	11.0	不支持
Windows 10	Edg	80.0.361.69	符合规范
Windows 10	Firefox	74.0	符合规范
Windows 10	Chrome	80.0.3987.149	符合规范
Android	EdgA	42.0.0.2741	符合规范
Android	Firefox	68.0	另存为对话框中的文件名未使用`download`的值，但实际保存的文件名使用了`download`的值
Android	UCBrowser	12.9.7.1077	另存为对话框中的文件名和实际保存的文件名未使用`download`的值，无法下载 data URL 和 blob URL，可下载跨源文件
Android	360 浏览器	9.0.0.140	data URL 的实际保存的文件名未使用`download`的值，无法下载 blob URL
Android	MicroMessenger	7.0.13.1640	点击没反应，不支持
Android	QQ webview	8.3.3.4515	弹出 QQ 浏览器推广页，不支持
iOS	Safari	13.0.5	某些情况下另存为对话框中的文件名会加上`.html`的后缀，但实际保存的文件名正常