文件下载的正确打开方式_打开方式下载-CSDN博客

1. a 标签
是最简单的，也是我们比较常用的方式。只能下载同源的文件，如果是跨域的文件，这里包括图片、音视频等媒体文件，都是预览，也无法下载。

<a href="http://www.baidu.com" download="baidu.html">下载</a>

通过书写a标签来实现文件下载。点击下载，发现是跳转到了百度的首页，并没有真的下载文件。

const a = document.createElement('a')
a.href = 'http://www.baidu.com'
a.download = 'baidu.html'
a.click()

通过js来实现。效果和上面的一样无法下载。

重点是a标签的download属性，这个属性是HTML5新增的。
它的作用是指定下载的文件名，如果不指定，那么下载的文件名就会根据请求内容的Content-Disposition来确定，如果没有Content-Disposition，那么就会使用请求的URL的最后一部分作为文件名。

2. window.open

window.open('http://www.baidu.com', '_blank')

这里的_blank是指定打开的方式，如果不指定，那么就会在当前页面打开，这里指定_blank，就是在新的页面打开。

同样a标签的download属性也是可以使用的，代码如下：

window.open('http://www.baidu.com', '_blank', 'download=baidu.html')

当然这种方式也是有缺陷的，对比于a标签，这种方式不能下载.html、.htm、.xml、.xhtml等文件，因为这些文件会被当成html文件来处理，所以会直接在当前页面打开。

同样也不能下载跨域的文件，毕竟是window.open，不是window.download（window.download是假想）。

3. location.href

location.href = 'http://www.baidu.com'

这种方式拥有window.open的所有缺陷，所以不推荐使用，这里只当作了解，所以不做过多的讲解。

4. location.?其他属性

这里的其他指代的都是能跳转页面的属性，比如location.assign、location.replace、location.reload等，这些属性都是可以实现文件下载的，代码如下：

location.assign('http://www.baidu.com')
location.replace('http://www.baidu.com')
location.reload('http://www.baidu.com')

这里的location.reload是有点特殊的，它的作用是重新加载当前页面，但是它也可以接受一个参数，这个参数就是要跳转的页面，所以也可以实现文件下载。

当然同location.href一样，这些方式的缺点都一样，同时还有属于每个属性自身的特性，这里只当拓展知识，不做过多的讲解。

5. XMLHttpRequest

这种方式就是我们常说的ajax下载，包括axios、fetch等都是相同的，代码如下：

const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.baidu.com')
xhr.send()

xhr.onload = function () {
  const blob = new Blob([xhr.response], { type: 'text/html' })
  const a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = 'baidu.html'
  a.click()
}