使用a 标签
通过a
标签来实现文件下载,这种方式是最简单的,也是我们比较常用的方式。
示例代码:
<a href="http://www.baidu.com" download="baidu.html">下载</a>
href:链接
download:下载后的文件名
就上面的这个示例,我们点击下载,发现是跳转到了百度的首页,并没有真的下载文件。
因为a
标签下载只能下载同源的文件,如果是跨域的文件,这里包括图片、音视频等媒体文件,都是预览,也无法下载。
也可以通过js
来实现,代码如下:
const a = document.createElement('a')
a.href = 'http://www.baidu.com'
a.download = 'baidu.html'
a.click()
效果和上面的一样,都是跳转到百度的首页,没有下载文件。
这里的重点是a
标签的download
属性,这个属性是HTML5
新增的。
它的作用是指定下载的文件名,如果不指定,那么下载的文件名就会根据请求内容的Content-Disposition
来确定,如果没有Content-Disposition
,那么就会使用请求的URL
的最后一部分作为文件名。