JavaScript前端各种文件下载功能的实现 _JavaScript

在前端项目开发的时候，系统支持文件下载是前端开发中常用到的功能之一，当用户访问我们的网站时发现有自己需要的资源时可以将资源下载下来。文件下载主要有两种形式，一种是通过文件地址下载，该文件可以存放在前端或者后端。另一种则是通过文件流下载，前端通过发送请求给后端并获取后端文件流进行下载。

文章插图

a标签下载download属性：是html5中的a标签的新特性，用来规定被下载的超链接目标。在a标签中如果没有申明download属性的时a标签的默会链接跳转进行预览（如txt , jpg , pdf ），当前浏览器不支持预览的文件时则出现下载。当申明了download属性之后浏览器会对href属性链接的文件进行下载。download属性与不支持H5的低版本浏览器不兼容且仅限于同源文件，如果是非同源download属性会失效。比如引用第三方的网站内容、引用前后端分离的服务器内容、甚至本地测试引用的本地文件，download都会不起作用。如果你想测试该功能可以在本地开一个服务，将文件放同一服务中测试就可以了。

文章插图

直接使用a标签时只要在a标签中添加download属性，如果是非a标签的话可以在出发事件的时候通过JAVAScript来创建一个隐藏a标签下载，当我们点击时触发隐藏的a标签下载事件。这里使用AppendChild和removeChild的处理是为了兼容Firefox浏览器。

文章插图

XMLHttpRequest下载需要了解XMLHttpRequest可以参考文章：JavaScript实战001：XMLHttpRequest使用入门，这里我利用XMLHttpRequest对象来发送请求，用blob类型来接受后台发过来的二进制类型文件。然后模拟a标签创建隐藏的下载链接，通过URL.createObjectURL()方法创建一个指向blob对象的URL地址。

文章插图

iframe下载iframe是HTML标签元素，可以用来创建内联框架。iframe提供了src属性用来规定在 iframe 中显示的文档的 URL，我们可以直接将文件地址抛给iframe，也可以赋值文件流地址给iframe 。功能实现跟a标签有点相似，创建一个隐藏的iframe标签来实现文件的下载功能。使用文件地址下载需要注意的是浏览器支持预览的文件类型无法下载（比如图片、PDF文档、text文本等会直接打开文件预览），文件流下载只需将请求接口赋给src属性，iframe会自动去请求该文件实现下载。

文章插图

window.open下载window.open()方法用于打开一个新的浏览器窗口或查找一个已命名的窗口，也可以用它来实现文件下载功能。而且这个比iframe更简单，直接将文件地址或者请求接口赋给window.open(url)方法即可实现文件下载功能。但是有个缺点就是每次下载都会打开一个新的窗口来实现下载（想不跳转可以尝试window.location.assign()方法，用于加载一个新的文档），而且如果使用文件地址下载的是浏览器支持预览的文件类型无法下载（比如图片、PDF文档、text文本等会直接打开文件预览）。

文章插图

form表单提交下载form表单是个比较常用的html表签，用户提交用户信息，比如常见的登录、注册界面大部分都是通过form表单进行数据提交的。form表单所有要提交的数据都必须放在form标签中，method属性定义提交的方法（有get和post两种提交方法），action属性定义请求的地址。form标签中支持input、menus、textarea、fieldset、legend 和 label 等元素，通过submit向服务器提交数据。这里我创建了form表单和input框，input用于输入请求的参数，form用于提交数据请求。

文章插图

Django后台接口这里提供下Django的后台文件请求接口，以上文件请求都是基于该接口实现的。接收请求方法为GET，请求参数为id（数据库存储的文件id），采用FileResponse方式返回的文件流信息（具体实现功能可以参考文章：Django实战013：各种文件下载功能实现详解）。

文章插图

总结：下载的方式方法有很多，以上只是JavaScript中常见的几种下载方式。其实用ajax或者axIOS也可以实现下载，但是万变不离其中，会JavaScript下载害怕不会别的么。以上下载方式个人觉得还是iframe比较简单方便，请求最好还是通过文件流来实现，相对文件地址下载会更安全些。