スポンサーリンク

Blazor Server Excelファイルをアップロードする

.NET CoreASP.NET CoreBlazor Server 5.0C#Excel

Blazor Server <InputFile>組み込みコンポーネントでExcelファイルをアップロードし、アップロードしたExcelファイルを読み込んで、Excelファイル内のデータを画面に表示するサンプルを作りしました。
Excelファイルの読み込みには、ClosedXML nugetパッケージ を使用しています。
ソースコードはGitHubで公開しています。

ソースコード構成

Blazor Server テンプレートから、変更を加えたソースファイル。

ソースコード変更内容を解説

/WebApplication1.csproj

・ClosedXML nugetパッケージをプロジェクトに追加。
・.Net Core でExcelファイルを操作する場合、今は ClosedXML が一番使われていると思う。

/_Imports.razor

・ClosedXML の usingを追加。
・ファイル操作用に System.IO の usingを追加。

/Pages/ExcelFileUpload.razor

・Excelファイルをアップロードするサンプル画面を追加。
・Excelファイルをアップロードするボタンに <InputFile> を使用。
 <InputFile> そのまま使用しているので、見た目はWebっぽくないボタンですが、Webっぽくカスタマイズすることも可能。
 詳しくは、Blazor Server ファイルアップロードボタンをカスタマイズする を参照下さい。
・FileUpload1()イベントハンドラでは、最初に、アップロードされたExcelファイルのファイル名、ファイルサイズを、画面表示用の値List(_ResultList)に追加している。
・アップロードされたExcelファイルは、一旦、Webサーバ配下に一時ファイル(binaryWriter.Write)として保存してから読み込んでいる。

/Shared/NavMenu.razor

・Excelファイルをアップロードするサンプル画面へのリンクを追加。

Visual Studio プロジェクト

今回使った Visual Studio プロジェクト テンプレートは、Blazor Server 5.0 の認証無し、HTTPS無しです。

コメント

タイトルとURLをコピーしました