前端文件下载-CSDN博客

本文链接：https://blog.csdn.net/weixin_53770876/article/details/134720330

一、后端（Nodejs）

1、示例代码

const http = require('http');
const fs = require('fs');

const port = 8080;

const server = http.createServer((req, res) => {
	const { method } = req;
	// 该响应头指定了响应的资源是否被允许与指定的来源共享，主要用于解决跨域问题。
	res.setHeader('Access-Control-Allow-Origin', '*');
	if (method === 'GET') {
		// 该响应头规定了响应的资源以何种形式展示，可以作为页面或者页面的一部分，也可以作为附件形式下载并保存到前端本地，filename指定文件名
		res.setHeader('Content-Disposition', 'attachment;filename=ooo.jpg');
		const imgRs = fs.createReadStream('./images/001.jpg');
		imgRs.pipe(res)
	}
})

server.listen(port, () => {
	console.log(`Server is running at localhost:${port}...`);
})

二、前端

1、直接使用a标签实现下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://localhost:8080">下载</a>
</body>
</html>

2、ajax下载文件

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080');
// responseType属性指定响应中包含的数据类型
xhr.responseType = 'blob';
xhr.onreadystatechange = () => {
	if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
		const xhrRes = xhr.response;
		const fileReader = new FileReader();
		fileReader.onload = function () {
			const resultBase64 = fileReader.result;
			const a = document.createElement('a');
			a.href = resultBase64;
			a.download = 'xixi.jpg';
			a.click();
		}
		// 读取Blob对象，读取完成后，fileReader的result属性中会包含一个data:URL格式的Base64字符串以表示所读取文件的内容
		fileReader.readAsDataURL(xhrRes);
	}
}
xhr.send(param);

该方式的思路主要是从后端获取到文件数据后，前端对数据进一步处理，处理方式除了上述的FileReader，还可以使用URL接口的静态方法createObjectURL，代码如下：

// 该方法返回一个字符串格式的唯一的blob链接（该链接协议为以blob:开头，后跟唯一标识浏览器中的对象的掩码）
const objUrl = URL.createObjectURL(xhrRes);
console.log(objUrl) // blob:http://127.0.0.1:5500/143091fe-4b86-4e43-bf2c-04427053bf72
const a = document.createElement('a');
a.href = objUrl;
a.download = 'xixi.jpg';
a.click();

需要注意的是，在每次调用URL.createObjectURL()方法时，都会创建一个新的URL对象，该URL对象的生命周期和创建它的窗口的document绑定，浏览器在document卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机调用URL.revokeObjectURL()方法主动释放掉它们。