Blazorでエクセルファイルを扱う

はじめに
環境
実装手順
アプリを実行する

はじめに

Blazorでエクセルファイルを作成・編集して、ダウンロードするというのをやりたかったので、やり方をこちらの記事にまとめました。

環境

Blazor Server (.NET 6.0)
Microsoft Visual Studio Professional 2022 (64-bit) Version 17.1.4
ClosedXML 0.95.4

実装手順

パッケージの導入

今回はエクセルを扱うためにClosedXMLというパッケージを利用します。

github.com

C#でエクセルファイルの作成や編集などができる便利なライブラリです。
これをNugetからプロジェクトに導入します。

パッケージマネージャーコンソールを利用する場合は以下のコマンドを実行します。

Install-Package ClosedXML

JavaScriptファイルの作成

ファイルをダウンロードするにはC#だけでは実装できないのでJavaScriptを用います。
今回はFileDownload.jsという名前にしました。

このファイルはwwwroot配下に配置します。

コードは以下のようにします。

function Download(fileName, content) {
    const file = new File([content], fileName, { type: "application/octet-stream" });
    const exportUrl = URL.createObjectURL(file);

    const a = document.createElement("a");
    document.body.appendChild(a);
    a.href = exportUrl;
    a.download = fileName;
    a.target = "_self";
    a.click();

    URL.revokeObjectURL(exportUrl);
}

次にこのファイルを参照するようにPages/_Layout_cshtmlファイルの<body>タグ内に以下を挿入します。

<script src="js/FileDownload.js"></script>

C#での実装

PagesフォルダにあるIndex.razorファイルを以下のように記述します。

@page "/"
@using ClosedXML.Excel;
@inject IJSRuntime JS

<button @onclick="CreateExcel">Excel作成</button>

@code {
    private async Task CreateExcel()
    {
        //エクセルファイルの作成
        var workbook = new XLWorkbook();

        //シートの作成
        var ws = workbook.Worksheets.Add("Test");

        //セルに値を記入
        ws.Cell(1,1).Value = "テスト";

        //stream形式に変換
        using var stream = new MemoryStream();
        workbook.SaveAs(stream);
        
        //ファイル名を定義
        var fileName = "test.xlsx";

        //JavaScriptの関数を呼び出し
        await JS.InvokeVoidAsync("Download", fileName, stream.ToArray());
    }
}