web前端之下载文件、href、location、createElement、appendChild、removeChild、createObjectURL、XMLHttpRequest

---

打开新页面，页面会闪

window.open(url);

---

href 不会打开新页面

window.location.href = url;

---

a标签不会打开新页面

const fileDownload = (url: string) => {
	const a = document.createElement('a');
	
	a.href = url;
	a.style.display = 'none';
	// 重命名不起作用
	// a.download = item.fileName;
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
}

fileDownload(url);

---

a标签不会打开新页面，重命名

const fileDownload = (item: any = {}) => {
	const x = new window.XMLHttpRequest();
	
	x.open('GET', item.content, true);
	x.responseType = 'blob';
	
	x.onload = () => {
		let url = window.URL.createObjectURL(x.response),
			a = document.createElement('a');
		
		a.href = url;
		a.style.display = 'none';
		a.download = item.fileName;
		document.body.appendChild(a);
		a.click();
		document.body.removeChild(a);
	};
	
	x.send();
}

fileDownload(item);

---

URL.createObjectURL()

URL.createObjectURL()静态方法会创建一个DOMString，其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定。这个新的URL对象表示指定的File对象或Blob对象。

---

XMLHttpRequest.send()

XMLHttpRequest.send()方法用于发送HTTP请求。如果是异步请求(默认为异步请求)，则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send()方法接受一个可选的参数，其作为请求主体；如果请求方法是GET或者HEAD，则应将请求主体设置为null。
如果没有使用setRequestHeader()方法设置Accept头部信息，则会发送带有"* / *"的Accep头部。

---

XMLHttpRequest

XMLHttpRequest(XHR)对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用。
尽管名称如此，XMLHttpRequest可以用于获取任何类型的数据，而不仅仅是XML。它甚至支持HTTP以外的协议(包括file://和FTP)，尽管可能受到更多出于安全等原因的限制。
如果您的通信流程需要从服务器端接收事件或消息数据，请考虑通过EventSource接口使用server-sent events。对于全双工的通信，WebSocket可能是更好的选择。

---

createElement

创建元素节点。

---

appendChild

将节点(元素)作为最后一个子元素添加到元素。

---

removeChild

removeChild方法删除元素的子节点。该方法以Node对象返回被删除的节点；如果节点不存在，则返回null。
子节点从是文档对象模型(DOM)中删除的。但是，可以修改返回的节点并将其插回DOM。