HTML5 Anchor Tag attrubite download 经验分享

Posted 2021-03-29 UCareer优课

今天通过介绍一个a tag的小技巧，来介绍如果合理的使用html5的新功能和做浏览器的兼容性测试。

<a href="user-manual.pdf" download>Download</a>

如果在不添加attrubite download的情况下, 浏览器会自动打开显示这个pdf， 而不是下载下来。这样用户则需要用自带的浏览器PDF浏览功能的然后存储到本地。这样会在特定的场景给用户带来极大的不便，比如下载二维码。因为在浏览器打开的时候，它并没有帮你存储到本地。

未添加download attrubite

添加download attrubite

浏览器兼容问题

因为这个HTML5的新特性，我们需要测试在主流浏览器的兼容问题。

这里我们可以通过caniuseit.com得到兼容性测试结果

download的属性在主流的浏览器上都支持

同源策略（Same-origin policy）

目前浏览器不支持跨域下载，所以所有的下载文件都必须同一域名.

<a href="user-manual.pdf" download>Download</a> ✅

<a href="http://not-mydomain/user-manual.pdf"  download> Download</a>❌

小结

• 当你想要使用html5的最新功能，需要做浏览器的兼容的测试（小工具caniuseit.com）

• 这里的download都是不是private file。如果需要下载private file，请在后端通过file handler来实现。

• 注意同源策略（Same-origin policy）

索引

同源策略

https://juejin.cn/post/6844903681683357710

浏览器兼容性测试

https://caniuse.com/

  往期推荐

  END

了解更多课程内容请点击下方”阅读原文“  访问 ucareer.ca

---

---

---