HTTP文件下载

1. 简介

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

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

为什么需要前端版本的下载?

在前后端分离情况下,前端与后端都是通过JSON类型数据,固定的响应格式进行通信(如:{"code": 0, "msg": "success", "data": null}),其中code是状态码,data是前端需要的数据。

后端实现(浏览器直接访问)的缺点?

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

2. 后端版本

注意

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

2.1. 浏览器直接下载

请求

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

响应

浏览器会自己跳下载框。

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

abc

2.2. JS触发下载

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

javascript 复制代码
let a = document.createElement("a");
a.setAttribute("href", "/example.txt");
a.click();

3. 前端版本

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

3.1. JS

html 复制代码
<!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

html 复制代码
<!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>

4. 参考

相关推荐
阑梦清川34 分钟前
JavaEE初阶---网络原理(五)---HTTP协议
网络·http·java-ee
阿尔帕兹1 小时前
构建 HTTP 服务端与 Docker 镜像:从开发到测试
网络协议·http·docker
follycat4 小时前
[极客大挑战 2019]HTTP 1
网络·网络协议·http·网络安全
earthzhang20215 小时前
《深入浅出HTTPS》读书笔记(5):随机数
网络协议·http·https
xiaoxiongip6665 小时前
HTTP 和 HTTPS
网络·爬虫·网络协议·tcp/ip·http·https·ip
CXDNW5 小时前
【网络面试篇】HTTP(2)(笔记)——http、https、http1.1、http2.0
网络·笔记·http·面试·https·http2.0
城南vision7 小时前
计算机网络——HTTP篇
网络协议·计算机网络·http
‍。。。8 小时前
使用Rust实现http/https正向代理
http·https·rust
田三番1 天前
使用 vscode 简单配置 ESP32 连接 Wi-Fi 每日定时发送 HTTP 和 HTTPS 请求
单片机·物联网·http·https·嵌入式·esp32·sntp
dulu~dulu1 天前
查缺补漏----用户上网过程(HTTP,DNS与ARP)
网络·网络协议·http