如何在网页上以表格格式显示 Excel DataFrame-解网

问：

我正在开发一个基于 Web 的仪表板，为此我使用 Python 作为后端技术，使用 AngularJS 作为前端技术。

由于我是初学者，我的首要任务是以表格格式在网页上显示 excel 数据

下面我编写了 python 代码，它只是读取 excel 数据并将其转换为 Json 格式并将其传递给 html 前端代码，但似乎输出符合我的期望，因为它以 Json 格式显示，而不是以表格格式显示。

# app.py

from flask import Flask, jsonify
import pandas as pd

app = Flask(__name__)

@app.route('/data')
def get_data():
    # read example Excel file into Pandas dataframe
    df = pd.read_excel('example.xlsx')
    
    # convert dataframe to JSON and return
    return jsonify(df.to_dict(orient='records'))

if __name__ == '__main__':
    # start Flask server
    app.run(debug=True)

这是前端代码

<!-- index.html -->

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>My Dashboard</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="ExampleCtrl">
    <table>
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in data">
                <td>{{row['Column 1']}}</td>
                <td>{{row['Column 2']}}</td>
                <td>{{row['Column 3']}}</td>
            </tr>
        </tbody>
    </table>
    <script>
        var app = angular.module('myApp', []);
        app.controller('ExampleCtrl', function($scope, $http) {
            $http.get('/data').then(function(response) {
                $scope.data = response.data;
            });
        });
    </script>
</body>
</html>

预期输出为。

第 1 列	第 2 列	第 3 列
0.23	0.44	0.54
.55	.4	.05

但是得到

[
  {
    "Column 1": 0.23,
    "Column 2": 0.44,
    "Column 3": 0.54
  },
  {
    "Column 1": 0.55,
    "Column 2": 0.4,
    "Column 3": 0.05
  }]

python json angularjs 烧瓶

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>My Dashboard</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body ng-controller="ExampleCtrl">
    <table>
        <thead>
            <tr>
                <th ng-repeat="col in columnHeaders">{{col}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in data">
                <td ng-repeat="cell in row">{{cell}}</td>
            </tr>
        </tbody>
    </table>
    <script>
        var app = angular.module('myApp', []);
        app.controller('ExampleCtrl', function($scope, $http) {
            $http.get('/data').then(function(response) {
                $scope.data = response.data.map(Object.values);
                $scope.columnHeaders = Object.keys(response.data[0]);
            });
        });
    </script>
</body>
</html>

如何在网页上以表格格式显示 Excel DataFrame

How to Display Excel DataFrame in tabular format on webpage

评论

评论