CodeZine(コードジン)

特集ページ一覧

Excelデータを扱うWebページを「DioDocs」と「SpreadJS」の連携で作ろう

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本記事では、グレープシティのドキュメント生成ライブラリー「DioDocs」と、JavaScriptスプレッドシート部品「SpreadJS」を連携させて活用する方法を紹介します。DioDocsをサーバー側、SpreadJSをクライアント側で動作させて、スプレッドシートのデータを相互に送受信するアプリが作れます。

目次

はじめに

 「DioDocs」は、ドキュメントを作成・編集する.NETのライブラリーです。.NET Frameworkや.NET Coreのアプリで、C#やVB.NETのコードからドキュメントを操作できます。Excelファイルが対象の「DioDocs for Excel」と、PDFファイルが対象の「DioDocs for PDF」がラインアップされています。

図1 DioDocsの公式ページ
図1 DioDocsの公式ページ

 一方でグレープシティは、Webページでスプレッドシートを表示するライブラリー「SpreadJS」も提供しています。SpreadJSとDioDocs for Excelは、スプレッドシート内容を表す共通のJSONデータ形式(*.ssjsonファイル形式)に対応しているため、相互にデータ連携を行えます。

 本記事では、DioDocs for ExcelとSpreadJSを連携させて活用する方法を、サンプルを交えて説明します。なお、以降ではDioDocs for Excelを単にDioDocsと記述します。

対象読者

  • DioDocsを利用したドキュメント操作を体験したい方
  • サーバーでスプレッドシートを生成してWebページでリッチに操作したい方
  • プログラムから生成する帳票をExcelで手軽に作りたい方

サンプルの動作に必要な環境

 本記事のサンプルは、以下の環境で動作を確認しています。

Windows 10 64bit版

  • DioDocs 3.0.1
  • SpreadJS 13.0.4
  • Microsoft Visual Studio Community 2019 16.5.3
  • Microsoft Edge 44.18362.449.0

DioDocsの基本的な利用方法

 DioDocs単体での基本的な利用法を、単純なサンプルで説明します。サンプル(P001DioDocsBasic)を実行すると、図2のExcelファイルがデスクトップに生成されます。

図2 DioDocsで生成したExcelファイル(P001DioDocsBasic)
図2 DioDocsで生成したExcelファイル(P001DioDocsBasic)

 実装方法を以下で説明します。まず、DioDocsを利用できる環境を作ります。Visual Studioで、C#の「コンソールアプリ (.NET Core)」プロジェクトを生成後、DioDocsをプロジェクトに追加します。メニューから「プロジェクト」-「NuGet パッケージの管理」を選択してNuGet パッケージ マネージャーを開き、検索ボックスに「DioDocs」と入力して表示されるリストから「GrapeCity.DioDocs.Excel.ja」パッケージをインストールします。

図3 DioDocsをプロジェクトに追加(P001DioDocsBasic)
図3 DioDocsをプロジェクトに追加(P001DioDocsBasic)

 次に、処理を記述するProgram.csのMainメソッドに、リスト1の通り実装します。

[リスト1]DioDocsでExcelファイルを生成する実装(P001DioDocsBasic/Program.cs)
static void Main(string[] args)
{
    // ワークブックを生成 ...(1)
    var workbook = new Workbook();
    // ワークシートを取得 ...(2)
    var worksheet = workbook.Worksheets[0];
    // ワークシートに値と数式を設定 ...(3)
    worksheet.Range["A1"].Value = "商品"; // 値
    worksheet.Range["A2"].Value = "みかん";
    worksheet.Range["A3"].Value = "りんご";
    worksheet.Range["A4"].Value = "バナナ";
    worksheet.Range["A5"].Value = "合計";
    worksheet.Range["B1"].Value = "個数";
    worksheet.Range["B2"].Value = 3;
    worksheet.Range["B3"].Value = 10;
    worksheet.Range["B4"].Value = 25;
    worksheet.Range["B5"].Formula = ("=SUM(B2:B4)"); // 数式
    // Excelファイルを保存 ...(4)
    var desktop = Environment.GetFolderPath(
        Environment.SpecialFolder.DesktopDirectory); // デスクトップのパス
    workbook.Save(Path.Combine(desktop, "HelloDioDocs.xlsx"));
}

 (1)で、DioDocsでワークブックを表すWorkbookクラスのオブジェクトworkbookを生成して、(2)でワークシートに対応するworksheetオブジェクトを取得します。取得したワークシートに、(3)で値(Value)や数式(Formula)を設定後、(4)のworkbook.Saveメソッドにファイルのパスを与えて実行して、Excelファイルを保存します。

[補足]DioDocsのライセンス設定について

 DioDocsを製品版として利用するにはライセンスの設定が必要です。公式ページで案内されている方法でライセンスキーを取得後、リスト2(1)、(2)どちらかの方法でライセンスキーを設定します。すべてのワークブックにライセンスキーを設定する場合は、(1)のWorkbook.SetLicenseKeyメソッドを利用します。特定のワークブックにライセンスキーを設定する場合は、(2)の通り、Workbookコンストラクターの引数にライセンスキーを設定します。

[リスト2]DioDocsのライセンス設定方法
// すべてのワークブックにライセンスを設定する場合 ...(1)
Workbook.SetLicenseKey("<ライセンスキー>");
// 特定のワークブックにライセンスキーを設定する場合 ...(2)
var workbook = new Workbook("<ライセンスキー>");

 なお、SpreadJSのライセンス設定方法については、過去記事を参照してください。

DioDocsとSpreadJSを連携して利用

 DioDocsとSpreadJSを連携して利用する方法を、以下で説明していきます。

[補足]ASP.NET Coreのプロジェクト設定

 以下のサンプルでは、SpreadJSでスプレッドシートを表示するWebページと、スプレッドシートのデータを送受信するWeb APIを、ASP.NET Coreを利用して作成します。ASP.NET CoreでWebページとWeb APIを利用するプロジェクトを設定する方法を、サンプルコードに含めたドキュメント(ProjectDoc)に記述していますので参考にしてください。

DioDocsからSpreadJSへの連携

 DioDocsからSpreadJSへデータを渡す例として、図2と同じスプレッドシートのデータをDioDocsで生成して、SpreadJSでWebページに表示させる、図4のサンプルを説明します。

図4 DioDocsで生成したスプレッドシートのデータをSpreadJSで表示(P002DtoS)
図4 DioDocsで生成したスプレッドシートのデータをSpreadJSで表示(P002DtoS)

 まず、スプレッドシートのデータを生成して返却する処理を、Web APIに対応するDioDocsController.csに、リスト3の通り実装します。

[リスト3]DioDocsでスプレッドシートのデータを生成するWeb API(P002DtoS/Controllers/DioDocsController.cs)
[HttpGet]
public string OnGetWorkbook()
{
    // ワークブックを生成 ...(1)
    var workbook = new Workbook();
    // ワークシートを取得 ...(2)
    var worksheet = workbook.Worksheets[0];
    // ワークシートに値と数式を設定 ...(3)
    worksheet.Range["A1"].Value = "商品"; // 値
(略)
    // ワークブックの内容をJSON文字列で返却 ...(4)
    return workbook.ToJson();
}

 ASP.NET Coreの仕組みによって、「http://localhost:<ポート番号>/api/DioDocs」というURLにHTTP GETリクエストがあった時に、OnGetWorkbookメソッドが実行されます。DioDocsでワークブックを生成してワークシートにデータを設定する(1)~(3)の処理はリスト1と同じ内容です。(4)のworkbook.ToJsonメソッドで、ワークブックの内容をJSON文字列に変換して返却します。

 スプレッドシートを表示するWebページは、Pages/Index.cshtmlに、リスト4の通り実装します。*.cshtmlはASP.NET CoreでWebページを記述するファイルで、今回は単にHTMLを記述していきます。デフォルトでは、ヘッダーやフッターといったデフォルトのレイアウトが自動設定されますが、本記事では(1)の記述で無効化します。

[リスト4]スプレッドシートを表示するWebページ(P002DtoS/Pages/Index.cshtml)
@page
@model IndexModel
@{
    Layout = null; // デフォルトのレイアウトページを無効化 ...(1)
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>P002DtoS</title>
    <!-- 言語設定 ...(2)-->
    <meta name="spreadjs culture" content="ja-jp" />
    <!-- SpreadJSのファイルを参照 ...(3)-->
    <link rel="stylesheet" href="~/lib/spreadjs/gc.spread.sheets.excel2016darkGray.13.0.4.css">
    <script src="~/lib/spreadjs/gc.spread.sheets.all.13.0.4.min.js"></script>
    <script src="~/lib/spreadjs/gc.spread.sheets.resources.ja.13.0.4.min.js"></script>
    <!-- 処理を実装するファイルを参照 ...(4)-->
    <script src="~/js/main.js"></script>
</head>
<body>
    <!-- スプレッドシートを表示する領域 ...(5)-->
    <div id="spreadjs-container" style="width:100%; height:240px;"></div>
</body>
</html>

 (2)がSpreadJSの言語設定、(3)がSpreadJSのファイル参照、(4)が処理を実装するファイルの参照、(5)はスプレッドシート表示領域の記述です。これらの記述については、過去記事も参考にしてください。

 スプレッドシートを表示してWeb APIからデータを取得する処理は、リスト4(4)で参照したmain.jsに、リスト5の通り実装します。

[リスト5]リスト4に対応するJavaScriptの実装(P002DtoS/wwwroot/js/main.js)
window.addEventListener('load', function () {
    // スプレッドシートの描画処理 ...(1)
    var workbook = new GC.Spread.Sheets.Workbook(
        document.getElementById('spreadjs-container'),
        { sheetCount: 1 }
    );
    // Web APIで、DioDocsからJSON文字列を受信して自身に反映する ...(2)
    fetch('/api/DioDocs')
        .then(res => res.json()) // JSONからオブジェクトに変換 ...(2a)
        .then(res => {
            workbook.fromJSON(res); // オブジェクトを反映 ...(2b)
        });
}, false);

 (1)はスプレッドシートの描画処理です。(2)はWeb APIを実行する処理で、fetchメソッドでWeb APIからスプレッドシートのデータをJSON文字列で取得して、(2a)でJSON文字列からJavaScriptオブジェクトに変換後、(2b)のworkbook.fromJSONメソッドでスプレッドシートに反映します。

SpreadJSからDioDocsへの連携

 SpreadJSからDioDocsへデータを渡すこともできます。図5のサンプルは、SpreadJSで描画したWebページ上のスプレッドシートからデータをサーバーに送信して、DioDocsでExcelやPDFファイルを生成します。

図5 SpreadJSのデータからDioDocsでファイルを生成(P003StoD)
図5 SpreadJSのデータからDioDocsでファイルを生成(P003StoD)

 Webページのスプレッドシートからデータを送信する処理はリスト6の通りです。

[リスト6]Webページのスプレッドシートからデータを送信する処理(P003StoD/wwwroot/js/main.js)
document.getElementById('send-to-diodocs').addEventListener('click', function () {
    // ワークブックのデータをエクスポート ...(1)
    var workbookData = workbook.toJSON();
    // フォームデータ作成 ...(2)
    var formData = new FormData();
    // ワークブックデータ ...(3)
    formData.append("jsonString", JSON.stringify(workbookData));
    // フォーマット(xlsx or pdf) ...(4)
    var formatSelection = document.getElementById('format-selection');
    formData.append("format", formatSelection.format.value);
    // フォームデータをPOSTでWeb APIに送信 ...(5)
    fetch('/api/DioDocs', {
        method: 'POST',
        body: formData
    })
        .then(res => res.blob()) // ファイル内容をBlobに取得 ...(6)
        .then(blob => {
            // Blobをファイルに保存(FileSaverを利用) ...(7)
            saveAs(blob, 'downloaded.' + formatSelection.format.value);
        });
}, false);

 (1)のworkbook.toJSONメソッドで、ワークブックのデータをエクスポートします。(2)でサーバーに送るフォームのデータを作成して、(3)でワークブックのデータ(JSON文字列)、(4)でファイルフォーマット(ExcelかPDF)をフォームデータに追加後、(5)でWeb APIにHTTP POSTで送信します。Web APIは生成したファイルのバイナリデータを返却するので、それを(6)でBlobとして取得して、(7)でファイルに保存します。なお、このサンプルでは、ファイルを保存する処理のために、FileSaverライブラリーのsaveAsメソッドを利用しています。

 リスト6の処理で送信されたスプレッドシートのデータからファイルを生成するWeb APIの実装は、リスト7の通りです。

[リスト7]リスト6に対応するWeb APIの実装(P003StoD/Controllers/DioDocsController.cs)
[HttpPost]
public IActionResult OnPostWorkbook(
    [FromForm] string jsonString,
    [FromForm] string format
)
{
    // JSON文字列をDioDocsにロード ...(1)
    var workbook = new Workbook();
    workbook.FromJson(jsonString);
    // DioDocsからMemoryStreamにExcelファイルを書き出し ...(2)
    var stream = new MemoryStream();
    workbook.Save(stream,
        format == "pdf" ? SaveFileFormat.Pdf : SaveFileFormat.Xlsx);
    // MemoryStreamの内容を返却 ...(3)
    return File(stream.ToArray(), "application/octet-stream");
}

 OnPostWorkbookメソッドは、「http://localhost:<ポート番号>/api/DioDocs」へ、HTTP POSTリクエストがあった時に実行され、Webページから送信されたスプレッドシートのJSON文字列がjsonString、ファイルフォーマットがformatの各引数に設定されます。(1)のworkbook.FromJsonメソッドにJSON文字列を渡してスプレッドシートのデータをロード後、(2)のworkbook.Saveメソッドでスプレッドシートの内容をストリームに(ここではMemoryStreamでメモリ上に)書き出します。第2引数にはformatで指定された出力ファイル種類を指定します。(3)で、メモリに書き出されたファイル内容を返却します。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:高機能JavaScriptグリッド部品「SpreadJS」の活用
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5