3. 前后端实现压缩包文件下载

1. 说明

在数据管理当中,批量处理某些文件,并以压缩包的形式在前端进行下载是很常见的功能,本文将简要讲述如何实现此功能,主要包括后端文件的整合与发送,前端文件的接收与下载。

2. 具体步骤

2.1 后端文件处理与发送

后端接收到文件下载的指令后,需要根据具体业务处理相关文件,比如从数据库中把相关数据读取出来并保存到文件中,后端的上传只需要文件的具体地址,这里相关文件的内容操作不再说明,只记录如何将已经处理好的文件进行上传的方法,具体操作如下代码:

python 复制代码
from flask import Flask, request, jsonify
from flask_cors import CORS
from flask import send_file
import os
import zipfile

app = Flask(__name__)

CORS(app)

@app.route('/testDownload/', methods=['GET','POST'])
def testDownload():
	# 这里省略具体文件内容的操作,直接拿到需要下载的文件路径
	download_file_path_list = ["./测试文件一.txt","测试文件二.txt"]
	zip_file_name = "test_files.zip"
	with zipfile.ZipFile(zip_file_name, 'w') as zipf:
		# 遍历路径列表,把指定文件写入到压缩包中
		for filePath in download_file_path_list:
			zipf.write(filePath, os.path.basename(filePath))
	# 发送压缩文件
	return send_file(zip_file_name, as_attachment=True)

if __name__ == '__main__':
	app.run(host = '0.0.0.0', debug = True)
2.2 前端文件接收

此处只做简单测试,前端页面的整体代码可根据项目需要自行设计,这里只给出响应方法实现,比如为一个按钮添加点击事件的处理方法,相关代码如下;

javascript 复制代码
testDownLoad(){
	let download_url = '/api/testDownload';
	axios.get(download_url,{
		responseType: 'blob'
	}).then(response => {
			let blob = new Blob([response.data], {type: 'text/case;chalet=ute-8;'});
			let url = URL.createObjectURL(blob);
			let link = document.createElement('a');
			link.setAttribute('href', url);
			link.setAttribute('download', 'test'+'.zip');
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		});
}

结束,没啥问题应该是可以实现功能的。

相关推荐
climber112123 分钟前
【Python Web】一文搞懂Flask框架:从入门到实战的完整指南
前端·python·flask
Watermelo61724 分钟前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
门前云梦26 分钟前
ollama+open-webui本地部署自己的模型到d盘+两种open-webui部署方式(详细步骤+大量贴图)
前端·经验分享·笔记·语言模型·node.js·github·pip
Micro麦可乐26 分钟前
前端拖拽排序实现详解:从原理到实践 - 附完整代码
前端·javascript·html5·拖拽排序·drop api·拖拽api
Watermelo61727 分钟前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6
Micro麦可乐32 分钟前
前端与 Spring Boot 后端无感 Token 刷新 - 从原理到全栈实践
前端·spring boot·后端·jwt·refresh token·无感token刷新
Heidi__32 分钟前
前端数据缓存机制详解
前端·缓存
讨厌吃蛋黄酥34 分钟前
前端路由双雄:Hash vs History,谁才是React项目的真命天子?
前端·react.js·设计
VillenK36 分钟前
vban2.0中table的使用—action封装
前端·vue.js
方块海绵41 分钟前
浅析 MongoDB
后端