python fastapi 将一个excel文件Sheet1表单内容以表格的形式在html网页上显示,表格内容可以在线编辑内容,增加和删除行,点击保存后,将页面所有表格组成一个数组传递给服务器,不使用VUE,REACT, BOOTSTAR等框架,含css和html
时间: 2024-10-01 18:09:00 浏览: 53
要实现在Python FastAPI应用中展示Excel文件并允许用户实时编辑内容,同时将数据传递到服务器,我们可以不依赖Vue、React或Bootstrap等前端框架,而是直接使用HTML、CSS以及JavaScript(主要是jQuery或原生JS)进行交互。以下是简单的步骤:
1. **读取Excel文件**:
使用`python-excel`库读取Excel文件,例如`pandas`库可以帮助我们轻松处理数据。
```python
import pandas as pd
from fastapi import File, UploadFile
async def read_excel(file: UploadFile):
df = pd.read_excel(file.file)
return df
```
2. **创建HTML模板**:
创建一个基本的HTML页面,包含一个表格结构,并使用`id`关联到JavaScript函数来获取数据。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
/* 自定义样式 */
</style>
</head>
<body>
<table id="data-table" border="1">
<!-- 表格内容由JavaScript生成 -->
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// JavaScript部分,用于操作表格,获取数据和发送请求
</script>
</body>
</html>
```
3. **JavaScript操作表格**:
使用jQuery(或其他库),动态渲染表格数据,提供添加、删除行的功能,并监听用户的编辑动作。
```javascript
$(document).ready(function() {
var data = {{ data | tojson }};
function updateTable(data) {
$('#data-table tbody').empty().append(data.map(row => `<tr>${row.join('</td><td>')}</tr>`));
}
// 初始化表格
updateTable(data);
// 添加事件监听,如:编辑、删除、提交表单
});
```
4. **提交数据到服务器**:
当用户点击保存按钮时,通过Ajax发送更新后的表格数据到FastAPI端点。
```javascript
function saveData() {
var tableRows = $('#data-table tr');
var rowData = [];
// 获取当前表格数据并发送到服务器
$.ajax({
type: 'POST',
url: '/update_data', // 替换为你的FastAPI路由
data: JSON.stringify({ rows: tableRows.map(row => row.data()) }), // 转换为JSON对象
contentType: 'application/json',
success: function(response) {
console.log('Success:', response);
},
error: function(error) {
console.error('Error:', error);
}
});
}
```
5. **FastAPI端点处理**:
在FastAPI应用中设置对应的接收数据的路由,比如使用`fastapi.encoders.JSONEncoder`来序列化接收到的数据。
```python
from fastapi import FastAPI, HTTPException, status
app = FastAPI()
@app.post('/update_data')
def update_excel_table(rows: List[List[str]]):
# 更新数据库或Excel文件中的数据
# ...
return {"message": "Data saved successfully"}
```
阅读全文