以下是
前端使用
Vue 3、
后端使用
Flask实现下载Excel
文件功能的详细方法：
###
后端Flask实现
首先，需要安装必要的库，如`
Flask`和`pandas`（用于生成Excel
文件）。可以使用以下命令进行安装：
```bash
pip install
Flask pandas openpyxl
```
以下是一个简单的
Flask示例代码：
```python
from
flask import
Flask, send_file
import pandas as pd
import io
app =
Flask(__name__)
@app
.route('/download_excel', methods=['GET'])
def download_excel():
# 示例
数据
data = {
'Name': ['Alice', 'Bob', 'Charlie'],
'Age': [25, 30, 35]
}
df = pd
.DataFrame(data)
# 创建一个内存中的Excel
文件
output = io
.BytesIO()
writer = pd
.ExcelWriter(output, engine='openpyxl')
df
.to_excel(writer, sheet_name='Sheet1', index=False)
writer
.close()
output
.seek(0)
# 发送
文件给客户端
return send_file(
output,
as_attachment=True,
download_name='example
.xlsx',
mimetype='application/vnd
.openxmlformats-officedocument
.spreadsheetml
.sheet'
)
if __name__ == '__main__':
app
.run(debug=True)
```
在上述代码中，定义了一个`/download_excel`的路由，当客户端访问该路由时，会生成一个包含示例
数据的Excel
文件，
并将其发送给客户端进行下载。
###
前端Vue 3实现
在
Vue 3项目中，可以使用`axios`库来发送请求。首先，安装`axios`：
```bash
npm install axios
```
以下是一个简单的
Vue 3组件示例：
```
vue
<template>
<button @click="downloadExcel">下载Excel
文件</button>
</template>
<script setup>
import axios from 'axios';
const downloadExcel = async () => {
try {
const response = await axios
.get('http://127
.0
.0
.1:5000/download_excel', {
responseType: 'blob'
});
const url = window
.URL
.createObjectURL(new Blob([response
.data]));
const link = document
.createElement('a');
link
.href = url;
link
.setAttribute('download', 'example
.xlsx');
document
.body
.appendChild(link);
link
.click();
document
.body
.removeChild(link);
} catch (error) {
console
.error('下载失败:', error);
}
};
</script>
```
在上述代码中，定义了一个按钮，当点击按钮时，会发送一个GET请求到
Flask后端的`/download_excel`路由。接收到响应后，会创建一个临时的URL，
并通过创建一个`<a>`标签来触发
文件下载。
### 总结
通过以上步骤，就可以实现
前端Vue 3与
后端Flask实现下载Excel
文件的功能。
后端负责生成Excel
文件并发送给客户端，
前端负责发送请求
并处理下载操作。
最低0.47元/天 解锁文章
扫一扫
1042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
