はじめに
Blazorでエクセルファイルを作成・編集して、ダウンロードするというのをやりたかったので、やり方をこちらの記事にまとめました。
環境
Blazor Server (.NET 6.0)
Microsoft Visual Studio Professional 2022 (64-bit) Version 17.1.4
ClosedXML 0.95.4
実装手順
パッケージの導入
今回はエクセルを扱うためにClosedXML
というパッケージを利用します。
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()); } }
以上で実装は完了です。
アプリを実行する
Excel作成
ボタンを押すとエクセルファイルをダウンロードできます。
ファイルを開くと以下の画像の通りセルに値が記入されています。