前段时间听到前端同学说前端拿到资源的CDN链接后可以直接从CDN下载资源，不需要经过后端，感觉很神奇，但是一直不明白是怎么实现的，前两天整理了下关于"CDN和对象存储的知识"(原文见此文参考接最后一条)，今天搜索学习了下前端直接下载资源的方式，特此记录。
目前前端直接下载web服务器或者CDN静态资源的方式有两种，一个是利用a标签，另一个是通过window.open()函数。
一、利用a标签
a标签就是html中的超链接标签，但是用过这个标签的同学应该都有这种印象，当超链接链接的内容是图片、视频或者pdf时，点击超链接往往会在浏览器的新标签页打开对应的图片、视频或者pdf，而不会开始下载。但是其他像压缩包这样的资源，也就是浏览器没办法直接打开的资源则会直接开始下载。那怎么样让所有的文件都默认下载而不是打开呢？
html5给a标签增加了一个download属性，当a标签带上了download属性时，点击超链接则会被浏览器解析为下载而不是打开。
下面我们来实操一下：
a标签未添加download属性
比如这个是不带download属性的a标签案例。
!DOCTYPEhtmlhtmlheadmetacharset="utf-8"/title/title/headbodyimgsrc="img/books/book1.jpg"alt="日俄海战"/ahref="img/books/book1.jpg"点击下载图片/a/body/html
用浏览器打开html文件后，点击超链接
在新标签页中打开了图片，并没有下载。
a标签添加download属性后
给a标签添加download属性后，再试一次：
!DOCTYPEhtmlhtmlheadmetacharset="utf-8"/title/title/headbodyimgsrc="img/books/book1.jpg"alt="日俄海战"/ahref="img/books/book1.jpg"download="日俄海战.jpg"点击下载图片/a/body/html
用浏览器打开html文件后，点击超链接，弹出了路径选择窗口，点击保存，图片完成下载。
换成网络图片再试一次
让我们把img标签和a标签的路径换成一张网络图片，而非本地图片，
!DOCTYPEhtmlhtmlheadmetacharset="utf-8"/!--解决img标签不能展示网络图片的问题--metaname="referrer"content="no-referrer"title/title/headbodyimgsrc="