Python Flask+Pandas讀取excel顯示到html網頁: CSS控制表格樣式、表頭文字居中

悟透發表於2024-04-18
PythonFlaskExcelHTML網頁CSS

前言全域性說明

CSS控制表格樣式


一、安裝flask模組

二、引用模組

三、啟動服務

模組安裝、引用模組、啟動Web服務方法,參考下面連結文章：
https://www.cnblogs.com/wutou/p/17963563

修改內容後，要重啟 flask 服務，修改才能生效


四、CSS 控制表格樣式

4.1.2檔名：index.py
from flask import Flask

app=Flask(__name__)

@app.route("/excel_to_html")
def excel_to_html():
    if request.method == 'GET':
        ## 讀取EXCEL檔案
        df = pd.read_excel('e_to_h.xlsx')
        ## 轉為html表格
        htm_table= df.to_html(index=False, classes="custom-table")
        ## 渲染模板
        return render_template('e_to_h.html')

if __name__ == '__main__':
    # app.debug = True
    # app.run(host='127.0.0.1',port = 5000)
    app.run(host='0.0.0.0',port = 5000)

e_to_h.xlsx 放到和 index.py 同目錄下，可以指定絕對路徑和相對路徑
程式碼裡自定義一個CSS類名 classes="custom-table"

4.1.2 檔名：index.html
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>Excel to Web</title>
        <style>
            .custom-table {
                background-color: #aabb
            }
        </style>
    </head>
    <body>
        <h1>h1 Excel to Web h1</h1>
        {{ table|safe }}
    </body>
</html>

html裡增加了 style 樣式，給表格新增背景色

4.2 訪問連線：

http://127.0.0.1:5000/excel_to_html

4.3 效果：

image


五、表頭文字居中 justify="center"

5.1.1 檔名：index.py

將4.1.1 程式碼部分修改如下，

html_table= df.to_html(index=False, classes="custom-table", justify="center")

增加 justify="center"

5.1.2 檔名：index.html
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>Excel to Web</title>
        <style>
            .custom-table {
                background-color: #FFF
            }
            table th, table td {
                width: 100px;
            }
        </style>
    </head>
    <body>
        <h1>h1 Excel to Web h1</h1>
        {{ table|safe }}
    </body>
</html>
5.2 訪問連線：

http://127.0.0.1:5000/excel_to_html

5.3 效果：

image




免責宣告：本號所涉及內容僅供安全研究與教學使用，如出現其他風險，後果自負。



參考、來源：
https://www.cnblogs.com/rong-z/p/17580396.html （新增CSS樣式、表頭居中 ）



相關文章