前端下载:<a>标签的 download 属性

171 阅读1分钟

前端下载:标签的download属性

此属性指示浏览器下载URL而不是导航到它,因此将提示用户将其保存为本地文件。如果属性有一个值,那么它将作为下载的文件名使用。此属性对允许的值没有限制,但是/和``会被转换为下划线。

  1. 此属性仅适用于同源 URLs
  2. 尽管HTTP URL需要位于同一源中,但是可以使用 blob: URLs 和 data: URLs ,以方便用户下载 JavaScript 方式生成的内容(例如使用在线绘图的Web应用创建的照片)。

常规的<a>标签,用于链接的跳转,如新的页面,那么如果我们给<a>标签加上download属性,就能很简单的让用户保存新的html页面。

可以参考菜鸟教程:www.runoob.com/tags/att-a-…

自己试了一下 代码可能写的有问题 不行

检测自己浏览器是否适用这个

 let canSupportDownload = 'download' in document.createElement('a')
    console.log(canSupportDownload);

找到错了 打开方式应该用上面的 Open with Live Server 自动刷新

image.png