python fastapi 将一个excel文件在html网页上显示内容,表格内容可以在线编辑,并实时监控页面数据变化,点击保存后,将页面所有表格组成一个数组传递给服务器 不使用vue架构,含html和css
时间: 2024-10-02 19:00:30 浏览: 12
在Python FastAPI应用中,为了实现在HTML网页上显示Excel文件并支持动态编辑和实时更新,你可以结合前端的JavaScript库如jQuery DataTables、Handsontable或使用更现代的解决方案如Pandas Dataframe渲染,以及FastAPI本身处理HTTP请求和响应。
以下是一个简化的步骤:
1. **服务端** (使用FastAPI)
- 使用`python-excel`或`pandas`读取Excel文件到DataFrame。
- 当有数据变更时(比如用户提交表单),更新DataFrame。
- 创建一个FastAPI路由,返回JSON格式的表格数据供前端展示。
```python
from fastapi import FastAPI, File, UploadFile
import pandas as pd
app = FastAPI()
@app.post("/upload")
async def upload_excel(file: UploadFile = File(...)):
df = pd.read_excel(file.file) # 读取Excel文件
# ... 对df进行处理 ...
@app.get("/table_data")
def get_table_data():
return df.to_dict(orient='records') # 转换为字典列表便于前端使用
```
2. **前端** (纯HTML/CSS/JavaScript)
- 使用HTML和CSS构建基本的表格结构。
- 引入适合的库(例如`<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>` for DataTables)。
- JavaScript代码负责初始化表格、监听数据变化、发送POST请求到服务器。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
</head>
<body>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<!-- 表头 -->
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable({
// 初始化时从服务器获取数据
data: fetch('/table_data').then(response => response.json()),
// 添加事件监听,当数据发生变化时发送请求更新服务器
"serverSide": true,
"ajax": {
"url": "/update",
"type": "POST", // 更新操作通常用POST
"data": function(d) { return d; } // 你需要根据实际数据格式调整这部分
}
});
});
</script>
</body>
</html>
```
```javascript
// JavaScript 更新函数 (假设在`scripts/update.js`)
function updateTableData(data) {
$.ajax({
url: '/table_data', // 发送更新后的数据
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(data),
success: function(response) {
// 更新表格数据
$('#example').DataTable().draw();
},
error: function(err) {
console.error("Error updating table:", err);
}
});
}
```