开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情

前言：

成功没有捷径但成长有路径

老概念新理解，重点记录一下

正文

背景

越来越多的业务场景中需要前端来处理文件下载，比如导出excel，下载附件，下载发票等等使用场景。目前主流的下载实现主要有两种：静态文件直接下载和文件流下载。我们可以选择的文件下载有多种形式，可以根据需求进行选择，下面就来——讲解下。

实现

常用的方法用a标签或者其他方式在浏览器中打开文件链接，浏览器的文件策略都可以直接下载文件，文件下载说到底还是浏览器的行为。

方法1 使用打开页面的方法

任何一个能在浏览器中打开链接的方法，都是可以执行下载文件的。打开一个页面我们常使用的一般有两种,一种是location.href挂链接来打开一个页面;还有一种就是使用window.open()方法

location.href

这种方法有几个前提

1，不能下载跨域的文件

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

3，location. href属性只能在当前页打开一个网址,window.open可以选择新开页面

window. open

window.open(strUrl,strWindowName,[strWindowFeatures])

·strUrl:要在新打开的窗口中加载的URL。

·strWindowName:新窗口的名称。可选的参数如下

_blank：打开一个新的标签页。这个是默认值

_parent:父页面打开

_self:当期页面打开

_top：顶层页面打开

name:窗口名称

·strWindowFeatures:这是一个可选参数,列出新窗口的特征。

window.open('www.baidu.com','_blank')

相同name的窗口只能创建一个，要想创建多个窗口则name不能相同

window.open(strUrl,strWindowName,[strWindowFeatures])

方法2，a标签

常规a标签+href+download就可以实现下载，通过download属性实现下载是比较常见简单的方法。但是同样的代码，针对不同链接，不同浏览器，产生的结果不一样，有些同学就比较懵。

download 是HTML5中a标签新增的一个属性，此属性会强制触发下载操作，指示浏览器下载URL而不是导航到它，并提示用户将其保存为本地文件

download兼容性可以通过这个查看 caniuse.com/?search=dow…

a标签相关

html不支持的文件，无论同源还是不同源，有没有download属性，都会下载。

html支持的文件,同源且有download属性,除ie外都会下载。

html支持的文件，不同源，无论有无download属性，都不会下载，浏览器会直接跳转打开。

实现download功能有几个前提

1,a标签要实现下载,下载链接只能是同源的文件,即window.location.protocol(传输协议)+window.location.host(域名)必须有,且一致。

如果是跨域的文件，这里包括图片、pdf、音视频等媒体文件，都是预览，也无法下载。