JavaScript实现文件下载的四种方式

JavaScript实现文件下载的四种方式

1、window对象实现文件下载

​ Window 对象表示浏览器中打开的窗口，如果文档包含框架（ 或 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。通过window对象的属性location可以获取到Location对象，Location 对象包含有关当前 URL 的信息，通过Location的属性href可以访问指定的URL，例子如下：

var url = "http://10.180.120.153/forum.php?mod=attachment&aid=MTF8ZWZjYTgwZDV8MTYwMzY5MTkxOXwxM3w2";
window.location.href=url;

window对象的方法open可以打开一个新的浏览器窗口或查找一个已命名的窗口，通过该方法也可以实现文件的下载，例子如下：

var url = "http://10.180.120.153/forum.php?mod=attachment&aid=MTF8ZWZjYTgwZDV8MTYwMzY5MTkxOXwxM3w2";
window.open(url);

2、a标签实现文件下载

HTML使用标签 a来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以通过点击这些内容来跳转到新的文档或者当前文档中的某个部分。在标签a>中使用了href属性来描述链接的地址，通过a标签可以很方便的实现文件下载，例子如下：

<a href="http://10.180.120.153/forum.php?mod=attachment&aid=MTF8ZWZjYTgwZDV8MTYwMzY5MTkxOXwxM3w2">Java开发者手册</a>

3、form表单实现文件下载

HTML标签来设置表单，通过直接提交表单与后台实现交互，若后端下载接口直接输出文件流，可以通过提交表单的方式来下载文件，例子如下：

var form = document.createElement("form");
form.id = Date.now();
form.action = "http://10.180.120.153/forum.php";
form.method = "GET";
form.target = "";
form.style.display = "none";
var input1 = document.createElement("input");
input1.type = "hidden";
input1.name = "mod";
input1.value = "attachment";
var input2 = document.createElement("input");
input2.type = "hidden";
input2.name = "aid";
input2.value = "MTF8ZWZjYTgwZDV8MTYwMzY5MTkxOXwxM3w2";
document.getElementsByTagName("body")[0].appendChild(form);
form.appendChild(input1);
form.appendChild(input2);
form.submit();
form.parentNode.removeChild(form);

4、XMLHttpRequest实现文件下载

XMLHttpRequest 对象用于在后台与服务器交换数据。XMLHttpRequest 对象可以实现HTTP异步请求，其作用可概括为以下几点：

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

XMLHttpRequest 对象可以接收接口返回的文件流，实现文件下载功能，并且可以监控下载状态，兼容Chrome、火狐、IE10、IE11、Edge浏览器，例子如下：

"use strict";

var File = (function(mod) {
   
    /**
     * 单个文件下载.
     * 
     * @param url
     * @param params
     * @param fileName
     */
    mod.download = function(url, params