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. 参考

相关推荐
iOS技术狂热者4 小时前
多图超详细安装flutter&Android Studio开发环境,并配置插件
websocket·网络协议·tcp/ip·http·网络安全·https·udp
今夜有雨.4 小时前
HTTP---基础知识
服务器·网络·后端·网络协议·学习·tcp/ip·http
无名之逆10 小时前
hyperlane:Rust HTTP 服务器开发的不二之选
服务器·开发语言·前端·后端·安全·http·rust
。puppy13 小时前
HCIA—— 31 HTTP的报文、请求响应报文、方法、URI和URL
网络·网络协议·http
无职转生真好看14 小时前
HTTP和HTTPS区别
网络协议·http·https
秋名RG15 小时前
HTTP 1.0和2.0 有什么区别?
网络·网络协议·http
罗念笙16 小时前
HTTP1.0和2.0有什么区别?
网络协议·http
YiHanXii19 小时前
Axios 相关的面试题
前端·http·vue·react
金丝猴也是猿21 小时前
手机硬件检测详解:从版本信息到相机功能的全面指南
websocket·网络协议·tcp/ip·http·网络安全·https·udp
iOS技术狂热者1 天前
wireshark开启对https密文抓包
websocket·网络协议·tcp/ip·http·网络安全·https·udp