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 要素の下に、 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}";
        }
    }
}

このコードは、OnInputFileChangeというプライベートメソッドを定義します。 ExcelはXLSまたはXLSX形式である可能性があります。 このコードは、アップロードされた基本的なExcelファイルを読み込み、それを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ファイル