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);
		});
}

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

相关推荐
Asthenia041234 分钟前
Spring扩展点与工具类获取容器Bean-基于ApplicationContextAware实现非IOC容器中调用IOC的Bean
后端
FreeCultureBoy41 分钟前
macOS 命令行 原生挂载 webdav 方法
前端
bobz9651 小时前
ovs patch port 对比 veth pair
后端
Asthenia04121 小时前
Java受检异常与非受检异常分析
后端
uhakadotcom1 小时前
快速开始使用 n8n
后端·面试·github
uhakadotcom1 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom1 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom1 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
JavaGuide1 小时前
公司来的新人用字符串存储日期,被组长怒怼了...
后端·mysql
uhakadotcom2 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试