Python FlaskでExcelシートを読み込み、ブラウザで表形式表示と列ごとの検索機能を実装

複数人で参照するエクセルについて、いざ編集したいときに誰かが編集可能で開いていて困ったことはありませんか？

そんな状況の解決案としてブラウザでエクセルデータを参照するのうはどうでしょう。

pythonのFlaskを使い、ブラウザ上でExcelのデータを列ごとに検索してみましょう。

DataTablesなどのJavaScriptライブラリを使用することで簡単に実現できます。

DataTablesは、検索やフィルタリング、ソート機能を簡単に追加できる非常に強力なライブラリです。

手順
必要なライブラリ
Flaskアプリケーションのコード:
説明
実行方法

手順

DataTablesライブラリを利用して、Excelデータをテーブル形式で表示し、列ごとに検索機能を追加します。

必要なライブラリ

Flask (pip install flask)
pandas (pip install pandas openpyxl)
DataTables（JavaScriptライブラリ）

Flaskアプリケーションのコード:

app.py:

from flask import Flask, render_template
import pandas as pd

app = Flask(__name__)

# Excelファイルの指定シートを読み込む関数
def read_excel_sheet(file_path, sheet_name):
    df = pd.read_excel(file_path, sheet_name=sheet_name)
    return df

@app.route('/')
def index():
    # Excelファイルのパスとシート名を指定
    file_path = '[エクセルのファイルパス]your_excel_file.xlsx'
    sheet_name = 'Sheet1'
    
    # Excelデータをデータフレームに読み込む
    df = read_excel_sheet(file_path, sheet_name)
    
    # HTMLテンプレートにデータを渡す
    return render_template('table_search.html', tables=df.to_html(classes='data', index=False, header="true"))

if __name__ == '__main__':
    app.run(debug=True)

templates/table_search.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel Table with Search</title>
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css">
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
    </style>
</head>
<body>
    <h1>Excel Data Table with Column Search</h1>
 
    <!-- テーブル表示 -->
    <div>
        {{ tables|safe }}
    </div>

    <!-- jQueryとDataTablesライブラリ -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
 
    <script>
        // ページがロードされたときにDataTablesを適用
        $(document).ready(function() {
            var table = $('.data').DataTable({
                "searching": true,  // 検索機能を有効化
                "paging": true,     // ページングを有効化
                "info": false,      // テーブル情報を非表示
                "autoWidth": true   // 自動幅調整を有効化
            });
 
            // 各列ごとの検索ボックスを追加
            $('.data thead th').each(function () {
                var title = $(this).text();
                $(this).append('<br><input type="text" placeholder="Search ' + title + '" />');
            });
 
            // 各列ごとの検索機能
            table.columns().every(function () {
                var that = this;
                $('input', this.header()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that.search(this.value).draw();
                    }
                });
            });
        });
    </script>
</body>
</html>

説明

Flask部分:
- pandasを使用してExcelファイルからデータを読み込み、それをto_html()メソッドを使ってHTMLテーブルに変換し、Jinjaテンプレートに渡しています。
HTMLテンプレート:
- DataTablesを使ってテーブルに検索機能を追加しています。
- 各列に検索ボックスを追加し、ユーザーが特定の列に基づいて検索できるようにしています。
- JavaScriptでテーブルの列ごとに検索ができるように設定されています。
DataTables:
- DataTablesのcolumns().every()を使って、各列に検索ボックスを追加。
- ページング、検索機能も有効化しています。

実行方法

１．app.pyを実行して、Flaskサーバーを立ち上げます。

python app.py

２．ブラウザで http://127.0.0.1:5000/ にアクセスすると、列ごとの検索機能が付いたExcelデータのテーブルが表示されます。

この構成により、列ごとに検索できる機能が追加されたExcelデータをブラウザで簡単に表示できます。

この処理をもとにして複数のファイルを読み込んで編集表示させるなどしてみましょう。