python fastapi 将一个excel文件Sheet1表单内容以表格的形式在html网页上显示,表格内容可以在线编辑,点击保存后,将页面所有表格组成一个数组传递给服务器,不使用VUE,REACT, BOOTSTAR等框架,含css和html
时间: 2024-10-01 13:08:51 浏览: 37
Python基于pandas爬取网页表格数据
5星 · 资源好评率100%
在Python FastAPI项目中,为了实现在HTML网页上显示Excel文件的内容并支持在线编辑,你可以采用以下步骤:
1. **读取Excel文件**:
使用pandas库读取Excel文件,例如`pd.read_excel('path_to_your_file.xlsx', sheet_name='Sheet1')`。
2. **处理数据**:
将读取的数据转换成HTML表格结构,每个单元格可以用`<td>`标签包裹,整个表格用`<table>`标签包含,并提供一个ID以便后续操作。
```python
import pandas as pd
@app.get("/sheet1")
async def read_sheet1():
data = pd.read_excel("your_excel_file.xlsx", sheet_name="Sheet1")
html_table = render_template('sheet1.html', table=data.to_html(index=False))
return html_table
```
3. **创建HTML模板** (`sheet1.html`):
创建一个简单的HTML模板,其中包含一个`<form>`元素用于编辑,以及一个JavaScript脚本来监听表单变化和提交事件。这里假设表格ID为"sheet1-table":
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
/* 自定义样式 */
</style>
</head>
<body>
<h1>Sheet1</h1>
<table id="sheet1-table" border="1">
{{ table }}
</table>
<br />
<button onclick="saveTable()">保存</button>
<script>
function saveTable() {
// 获取表格内的所有单元格数据
var tableData = document.getElementById('sheet1-table').getElementsByTagName("td");
var rowData = [];
for (var i = 0; i < tableData.length; i++) {
rowData.push(tableData[i].innerText);
}
// 发送POST请求到服务器更新数据
fetch('/update-sheet1', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({rowData: rowData})
})
.then(response => response.json())
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>
```
4. **处理表单提交** (`app.py`):
定义一个FastAPI路由接收前端发送的表格数据,并更新Excel文件:
```python
@app.post("/update-sheet1")
async def update_sheet1(request: Request):
try:
content = await request.json()
updated_data = content["rowData"]
# 更新数据至Excel(这里仅作示例,实际操作可能需要持久化数据库或其他存储)
df = pd.DataFrame(updated_data, columns=data.columns)
new_excel = pd.concat([data, df], ignore_index=True)
with pd.ExcelWriter('your_excel_file.xlsx', mode='a') as writer:
new_excel.to_excel(writer, sheet_name="Sheet1", index=False)
return {"message": "表格已保存"}
except Exception as e:
return {"error": str(e)}
finally:
# 清理内存
del df, new_excel
```
记得安装必要的依赖(如requests、fastapi、uvicorn等),并在服务器运行FastAPI应用。此解决方案没有直接涉及Vue、React或Bootstrap等现代前端框架,而是通过纯HTML、CSS和JavaScript实现了功能。
阅读全文