BlazorでCSVにエクスポートする方法

Blazorプロジェクトの設定

まず、Blazorサーバープロジェクトを新しく作成する必要があります。 Visual Studioを開き、新しいプロジェクトを作成し、「Blazor Server App」テンプレートを選択します。 プロジェクトに名前をつけ、「作成」をクリックします。

プロジェクトが作成されたら、Pagesフォルダーを開き、Index.razorファイルを探します。ここに、Blazorコンポーネントが追加され、ファイルアップロードと変換の処理が行われるコードが書かれます。

IronXLのインストール

コードを書き始める前に、IronXLライブラリをインストールする必要があります。 Visual Studioのパッケージマネージャーコンソールを開き、次のコマンドを実行します。

Install-Package IronXL.Excel

このコマンドは、BlazorプロジェクトにIronXLライブラリをインストールします。 これでコードを書き始める準備が整いました！

ファイルアップロードコンポーネントの作成

まず、ユーザーが既存のExcelファイルをアップロードできるように基本的なファイルアップロードコンポーネントを作成します。その後、Microsoft.AspNetCore.Components.Forms名前空間からInputFileコンポーネントが追加されます。 次のコードを@page ""の行の下にIndex.razorファイルに追加します。

@using Microsoft.AspNetCore.Components.Forms
@using IronXL
@using System.IO
@using System.Threading.Tasks

<div class="container">
    <h3>File Upload</h3>

    <InputFile class="button" OnChange="@OnInputFileChange" accept=".xls,.xlsx,.xlsm,.xltx,.csv,.tsv" />
    <h3>Selected File: @originalFileName</h3>
    <h3 style="color:bisque">Is File converted: <span>@message</span></h3>
</div>

このコードは、ボタンとファイル変換の状況を表示するメッセージエリアを備えたファイルアップロードコンポーネントを設定します。 InputFileコンポーネントのaccept属性は、受け入れるファイル形式を指定します。

ファイル変換コードの作成

次に、ファイルのアップロードと変換を処理するコードを書きます。 このタスクを達成するために、IronXL、Blazor、C#の組み合わせを使用します。 IronXLを使用してCSVをExcelファイルに変換できます。

次のコードを先ほど追加したdiv要素の下にIndex.razorファイルに追加します。

@code {
    private string originalFileName;
    private string message = "";

    private async Task OnInputFileChange(InputFileChangeEventArgs e)
    {
        var file = e.File;
        originalFileName = file.Name;

        try
        {
            // Read the uploaded file into a memory stream
            using var memoryStream = new MemoryStream();
            await file.OpenReadStream().CopyToAsync(memoryStream);

            // Load the workbook using IronXL
            WorkBook workBook = WorkBook.Load(memoryStream);

            // Save the workbook as a CSV file
            string outputPath = "sample.csv";
            workBook.SaveAsCsv(outputPath);

            message = "Conversion completed!";
        }
        catch (Exception ex)
        {
            message = $"An error occurred: {ex.Message}";
        }
    }
}

このコードは、ExcelスプレッドシートがInputFileコンポーネントを使用してアップロードされたときにトリガーされるOnInputFileChangeと呼ばれるプライベートメソッドを定義します。 ExcelはXLSまたはXLSX形式である可能性があります。 コードはアップロードされた基本的なExcelファイルを読み込み、WorkBookオブジェクトに読み込み、そしてWorkBookをCSVファイルとして保存します。変換の状態は、ページ上のメッセージエリアに表示されます。

コードの内訳

まずは、完全なコードを見てみましょう：

@page "/"
@using Microsoft.AspNetCore.Components.Forms
@using IronXL
@using System.IO
@using System.Threading.Tasks

<style>
    body{
        background-color: skyblue
    }
    .container {
        max-width: 800px;
        margin: 0 auto;
        font-family: Arial, sans-serif;
    }

    h3 {
        margin-top: 30px;
        font-size: 30px;
        margin-bottom: 30px;
    }

    .button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 15px 0;
        cursor: pointer;
    }
    span {
        font-size: 20px;
    }
</style>

<div class="container">
    <h3>File Upload</h3>

    <InputFile class="button" OnChange="@OnInputFileChange" accept=".xls,.xlsx,.xlsm,.xltx,.csv,.tsv" />
    <h3>Selected File: @originalFileName</h3>
    <h3 style="color:bisque">Is File converted: <span>@message</span></h3>
</div>

@code {
    private string originalFileName;
    private string message = "";

    private async Task OnInputFileChange(InputFileChangeEventArgs e)
    {
        var file = e.File;
        originalFileName = file.Name;

        try
        {
            // Read the uploaded file into a memory stream
            using var memoryStream = new MemoryStream();
            await file.OpenReadStream().CopyToAsync(memoryStream);

            // Load the workbook using IronXL
            WorkBook workBook = WorkBook.Load(memoryStream);

            // Save the workbook as a CSV file
            string outputPath = "sample.csv";
            workBook.SaveAsCsv(outputPath);

            message = "Conversion completed!";
        }
        catch (Exception ex)
        {
            message = $"An error occurred: {ex.Message}";
        }
    }
}

さらにコードを細かく見ていきましょう：

1. ファイルがアップロードされるとOnInputFileChangeメソッドがトリガーされ、InputFileChangeEventArgsオブジェクトが渡されます。 このオブジェクトには、アップロードされたファイルの名前やサイズなどの情報が含まれています。
2. オリジナルのファイル名をページに表示するために、originalFileNameという変数に格納します。
3. try-catchブロック内で、新しいMemoryStreamオブジェクトを作成し、アップロードされたファイルの内容を読み込みます。 usingステートメントは、メモリストリームがもう必要なくなったときに適切に破棄されることを保証します。
4. awaitキーワードを使用して、アップロードされたファイルの内容を非同期でメモリストリームにコピーします。 これにより、ファイルを読み込んでいる間もこのアプリケーションが応答性を保ちます。
5. 次に、WorkBook.Loadメソッドを使用して、メモリストリームの内容をWorkBookオブジェクトに読み込みます。 このオブジェクトはシート、セル、データを含むExcel全体のワークブックを表します。
6. 変換されたCSVファイルの出力ファイル名を指定します。このケースでは、"sample.csv"という名前を使用しています。
7. WorkBookオブジェクトのSaveAsCsvメソッドを使用して、指定された出力ファイル名でワークブックをCSVファイルとして保存します。
8. 変換が成功すると、変換が完了したことを示すメッセージが表示されます。 エラーが発生した場合は、例外をキャッチしてエラーメッセージを表示します。

アプリケーションのテスト

Blazorアプリケーションが完成したので、テストする時が来ました！ F5を押して、Visual Studioでアプリケーションを実行します。 アプリケーションが実行されると、ページ上にファイルアップロードボタンが表示されるはずです。

Blazorアプリケーションの実行

ボタンをクリックし、アップロードするExcelファイルを選択します。 InputFileコンポーネントのaccept属性にリストされているファイル形式が受け付けられます。

Excelファイルの選択

ファイルを選択した後、アプリケーションはファイルを読み込み、IronXLを使用してCSV形式に変換し、指定された出力ファイル名で変換後のファイルを保存します。 変換の状態とオリジナルのファイル名を表示するメッセージが表示されるはずです。

変換の状態

ドキュメントのフォーマットが完全に変更されました。 IronXLを使用してExcelファイルをCSV形式にエクスポートできるBlazorアプリケーションの構築に成功しました。 次のスクリーンショットは、このプログラムの出力を示しています。

出力されたExcelファイル