HTTP文件下载

1. 简介

前后端版本下载的主要区别？

后端版本：浏览器直接访问下载链接，服务器响应头包含Content-Type: application/octet-stream，浏览器自动弹出下载框。
前端版本：前端JS使用Ajax发起请求获取数据，完成过后通过JS生成下载对象在由JS触发下载，浏览器自动弹出下载框。

为什么需要前端版本的下载？
在前后端分离情况下，前端与后端都是通过JSON类型数据，固定的响应格式进行通信（如：{"code": 0, "msg": "success", "data": null}），其中code是状态码，data是前端需要的数据。

后端实现（浏览器直接访问）的缺点？：

请求添加令牌难以统一：正常前后端分离我们的令牌不是放到Cookie中保存，而是通过JS拦截器每次请求发出前添加令牌，而浏览器直接发起的请求我们添加令牌就很麻烦。
响应接口参数难以统一：如果由后端来完成下载任务，前后端就无法维持响应接口的统一（正常请求是这样："code": 0, "msg": "success", "data": null}，但碰到下载文件响应确是直接文件）。

2. 后端版本

注意

后端版本的文件下载不能是由Ajax发起。

2.1. 浏览器直接下载

请求

GET /example.txt HTTP/1.1
Host: 192.168.2.91:8080
Accept-Encoding: gzip, deflate
Connection: keep-alive

响应

浏览器会自己跳下载框。

HTTP/1.1 200 OK
Content-Type: application/octet-stream
Date: Sat, 06 Apr 2024 01:43:31 GMT
Content-Length: 3abc

2.2. JS触发下载

通信流程同上，流程也和上面一样，只不过一个是由人手动触发JS，一个是由JS触发JS，本质都是后端实现的文件下载。

let a = document.createElement("a");
a.setAttribute("href", "/example.txt");
a.click();

3. 前端版本

前端版本实际是从API角度考虑，后台只提供统一的API接口不考虑文件下载。前端如果需要下载自己找后台请求数据，格式化数据生成下载内容。

3.1. JS

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>File Download</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<button id="download">开始下载</button>
<script>window.onload = () => {const btn = document.querySelector('#download');btn.onclick = () => {$.get('http://ipinfo.cloudbypass.com', (data) => {const blob = new Blob([JSON.stringify(data)]);const filename = 'address.json';const downloadUrl = window.URL.createObjectURL(blob);const a = document.createElement('a');a.style.display = 'none';a.href = downloadUrl;a.download = filename;a.click();});};}
</script>
</body>
</html>

3.2. Axios

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>File Download</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
<button id="download">开始下载</button>
<script>window.onload = () => {const btn = document.querySelector('#download');btn.onclick = () => {axios({method: 'get',url: 'http://ipinfo.cloudbypass.com',responseType: 'blob'}).then((res) => {const filename = 'address.json';const downloadUrl = window.URL.createObjectURL(res.data);const a = document.createElement('a');a.style.display = 'none';a.href = downloadUrl;a.download = filename;a.click();});};}
</script>
</body>
</html>