使用 HTML5 download 属性创建可下载的链接

lio_zero
856 阅读2分钟

这是我参与更文挑战的第 8 天，活动详情查看：更文挑战

HTML5 引入了许多我们日常开发经常用到的一些方便的特性。其中之一便是在 <a> 标签上的 download 属性。

默认情况下，锚定标签 <a> 的默认值是导航链接，它将转到您在 href 属性中指定的链接。

当您添加 download 属性时，它表示浏览器应下载锚定指向的资源，而不是导航到该资源。并且你可以向 download 属性传递一个字符串值作为可下载文件的名称：

<a href="/logo.png" download>logo</a>
<!-- 下载的文件名为 'logo' -->
<a href="/logo.png" download="logo">logo</a>

注意：IE 11 不支持 download 属性。虽然不支持，但也有其专门的 polyfill 来支持在这些不支持的环境中运行该属性。

下载限制

download 属性仅适用于相同的源 URL。因此，如果 href 与站点的来源不同，它将无法工作。也就是您只能下载说该网站的文件。

以下为 MDN 提示需要注意的点：

  • 此属性仅适用于同源 URL。

  • 尽管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL ，以方便用户下载使用 JavaScript 生成的内容（例如使用在线绘图 Web 应用程序创建的照片）。

  • 如果 HTTP 头中的 Content-Disposition 属性赋予了一个不同于此属性的文件名，HTTP 头属性优先于此属性。

  • 如果 HTTP 头属性 Content-Disposition 被设置为inline（即 Content-Disposition='inline'），那么 Firefox 优先考虑 HTTP 头 Content-Dispositiondownload 属性。

什么是同源政策？

同源策略是一个重要的安全策略，它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

也就是说，用户只能下载来自源站点的文件。下面将给出 URL http://www.google.com/ 的源进行比对的示例：

源：https://www.google.com/结果原因
https://www.google.com/logo.png同源只有路径不同
https://www.google.com/public/img/logo.png同源只有路径不同
http://www.google.com/logo.png失败协议不同
https://www.google.com:444/logo.png失败端口不同 ( https:// 默认端口是 443)
https://www.google.com/dir/logo.png失败域名不同
avatar
文章
阅读
粉丝