フロントエンドとバックエンドの対話を通じて Excel レポートを作成する方法

オープンソースの中国コミュニティチームは、共有の名のもとに、オープンソースの中国コミュニティの背後にあるストーリーを伝える初のライブブロードキャストを行いました。」

序文

Excel はオフィス分野で最も幅広いユーザーに利用されており、その強力なデータ処理機能と視覚化機能により、かけがえのないツールとなっています。データを明確に表示するだけでなく、データ分析、チャート作成、データピボットなどの操作も実行でき、ユーザーに包括的なデータ表示および分析機能を提供します。

今日、エディターは、Excel レポートテンプレートを実装し、Grape City Company の純粋なフロントエンドテーブルコントロール SpreadJS とバックエンドテーブルコンポーネント GcExcel を介してデータを入力および記入する方法を紹介します。

環境整備

Node.js

SpreadJSオンラインフォームエディター

コードファイル (この記事を読むための参照として使用できます)

フロントエンド

Excel レポートテンプレートをデザインする

1.レポートを作成するためのデータソースをロードします。

SpreadJSオンラインテーブルエディタを開き、グループ化レポートを設計する前に、テーブルツールバーの[データ]タブの[データソース]ボタンをクリックしてデータソースを追加する必要があります。

[テーブルの追加] ボタンを使用して、各データソースオブジェクト (各データソースオブジェクトはテーブルに対応します) を追加し、データを読み取るためのパスを構成します (パスは、対応する形式のデータソースを要求するアドレス、または、サーバーであること（要求されたアドレス）、サーバーは形式に準拠したデータソースオブジェクトを返します。

データパスはオプションのフィールドです。json に複数のデータソースが含まれている場合は、データパスを設定することでそれらを区別できます。

2.レポートテンプレートを追加します。

データソースを追加した後、[挿入] タブのレポートボタンをクリックして、新しいレポートテンプレートを挿入します。下図に示すように、以前に追加したデータソースオブジェクトが左側のデータソースリストに表示されます。

3.グループ化されたレポートを設定します。

左側のデータソースリストのフィールドをドラッグすると、次の図に示すように、販売地域、都道府県、市区町村、製品タイプのフィールドをグループ化し、売上と利益をカウントするレポートテンプレートをすばやく作成できます。

4. Excel テンプレートを sjs ファイルとして保存します

Excelレポートテンプレートを変更する

Excel レポートテンプレートを .sjs ファイルとして保存した後、エディターは Excel レポートテンプレートの一部のセルを GcExcel テンプレート言語に変換する必要があります。具体的な操作は次のとおりです。

.sjs ファイルを SpreadJS フロントエンドコードのルートディレクトリに配置します。

5. Excel テンプレートを GcExcel テンプレート構文に変換する

Excel レポートテンプレート (下図に示す) のセル C4 (州) を例にとると、エディターはまず getBindingPath メソッドを通じてテンプレート API 情報 (下図の DevTools のキュー情報) を取得します。

API 情報を取得したら、そのバインディングパスを解析します。

//此为部分代码，完整代码在文末的Gitee链接中
let binding = template.getBindingPath(r, c)  // binding内容如上图
// ... 
// 绑定路径
let path = ""
switch (binding && binding.type) {
    case "Group":
    case "List":
        if (binding.binding) {
            let p = binding.binding.match(/(?<=\[)[^\]\[]*(?=\])/g).join(".")
            path += ds + "." + p // path="销售数据.省份"
        }
        break;
    // ...
}

次に、そのマージタイプと展開方向を解析します。

// Group类型
let group = ""
if (binding && binding.type == "Group") {
    group = "G=M"
} else if (binding && binding.type == "List") {
    group = "G=L"
}
// Expand方向
let expand = ""
if (binding && binding.type != "Summary" && binding.spillDirection == "Vertical") {
   expand = "E=V"
} else if (binding && binding.type != "Summary" && binding.spillDirection == "Horizontal") {
   expand = "E=H"
}

最後に、この情報を統合し、二重中括弧を追加すると、エクスポートされた Excel ファイルのセル C4 の内容は、次の GcExcel テンプレート構文になるはずです。

{{ds.销售数据.省份(E=V,G=M)}}

6.フロントエンドプロジェクトを実行し、Excel テンプレートファイルをエクスポートします。

コマンド [npm install] を入力して依存関係をダウンロードします。
「npm run start」コマンドを入力してプロジェクトを起動します（起動後は下図のように）

最後に、次の図に示すように、変更したテンプレートを Excel ファイルにエクスポートします。県単位の情報が GcExcel テンプレートの構文に変更されたことがわかります。

後部

GcExcel バックエンドコードを開き、以前にエクスポートした Excel テンプレートファイルをコードファイルのルートディレクトリに配置すると、最後の main 関数の実行によってデータが Excel テンプレートファイルに転送され、最終的にデータを含む Excel レポートが生成されます。

結論

上記は、SpreadJS+GcExcel を使用して Excel レポートを作成する方法の全プロセスです。さらに詳しく知りたい場合は、ここをクリックしてご覧ください。

拡張リンク:

【辛口情報放送】決算書分析の要点を1記事で読み解く！

財務諸表が良くないのはなぜですか?この4つのデザインポイントを理解して、デザインすることをおすすめします！

レポート分析分野における純粋なフロントエンド Excel テーブルコントロールのアプリケーションシナリオの分析