ASP.NET Core Blazor でのファイルのダウンロード

• ASP.NET Core アプリは、マップ静的アセット ミドルウェアまたは静的ファイル ミドルウェアを使用して、ファイルをサーバー側アプリのクライアントに提供します。 詳しくは、「ASP.NET Core Blazor の静的ファイル」をご覧ください。
• この記事のガイダンスは、コンテンツ配信ネットワーク (CDN) など、.NET を使用しない他の種類のファイル サーバーにも適用されます。

• ASP.NET Core アプリは、静的ファイル ミドルウェアを使用して、ファイルをサーバー側アプリのクライアントに提供します。
• この記事のガイダンスは、コンテンツ配信ネットワーク (CDN) など、.NET を使用しない他の種類のファイル サーバーにも適用されます。

比較的小さいファイル (< 250 MB) のダウンロードに推奨される方法は、JavaScript (JS) 相互運用を使用して、クライアント上の生のバイナリ データ バッファーにファイルの内容をストリーミングすることです。 この方法は、対話型レンダリング モードを採用するが、静的サーバー側レンダリング (静的 SSR) を採用するコンポーネントではないコンポーネントに有効です。

比較的小さいファイル (< 250 MB) のダウンロードに推奨される方法は、JavaScript (JS) 相互運用を使用して、クライアント上の生のバイナリ データ バッファーにファイルの内容をストリーミングすることです。

@page "/file-download-1"
@using System.IO
@inject IJSRuntime JS

<PageTitle>File Download 1</PageTitle>

<h1>File Download Example 1</h1>

<button @onclick="DownloadFileFromStream">
    Download File From Stream
</button>

@code {
    private Stream GetFileStream()
    {
        var randomBinaryData = new byte[50 * 1024];
        var fileStream = new MemoryStream(randomBinaryData);

        return fileStream;
    }

    private async Task DownloadFileFromStream()
    {
        var fileStream = GetFileStream();
        var fileName = "log.bin";

        using var streamRef = new DotNetStreamReference(stream: fileStream);

        await JS.InvokeVoidAsync("downloadFileFromStream", fileName, streamRef);
    }
}

@page "/file-download-1"
@using System.IO
@inject IJSRuntime JS

<h1>File Download Example</h1>

<button @onclick="DownloadFileFromStream">
    Download File From Stream
</button>

@code {
    private Stream GetFileStream()
    {
        var randomBinaryData = new byte[50 * 1024];
        var fileStream = new MemoryStream(randomBinaryData);

        return fileStream;
    }

    private async Task DownloadFileFromStream()
    {
        var fileStream = GetFileStream();
        var fileName = "log.bin";

        using var streamRef = new DotNetStreamReference(stream: fileStream);

        await JS.InvokeVoidAsync("downloadFileFromStream", fileName, streamRef);
    }
}

@page "/file-download-1"
@using System.IO
@inject IJSRuntime JS

<h1>File Download Example</h1>

<button @onclick="DownloadFileFromStream">
    Download File From Stream
</button>

@code {
    private Stream GetFileStream()
    {
        var randomBinaryData = new byte[50 * 1024];
        var fileStream = new MemoryStream(randomBinaryData);

        return fileStream;
    }

    private async Task DownloadFileFromStream()
    {
        var fileStream = GetFileStream();
        var fileName = "log.bin";

        using var streamRef = new DotNetStreamReference(stream: fileStream);

        await JS.InvokeVoidAsync("downloadFileFromStream", fileName, streamRef);
    }
}

静的にレンダリングされるコンポーネント用に対話的にレンダリングされたコンポーネントまたは任意のサイズのファイルを含む比較的大きなファイル (> = 250 MB) をダウンロードするには、JS を使用して、ファイルの名前と URL を持つアンカー要素をトリガーすることをお勧めします。

比較的大きなファイル (> = 250 MB) をダウンロードするには、JS を使用して、ファイルの名前と URL を持つアンカー要素をトリガーすることをお勧めします。

When victory is ours, we'll wipe every trace of the Thals and their city from the face of this land. We will avenge the deaths of all Kaleds who've fallen in the cause of right and justice and build a peace which will be a monument to their sacrifice. Our battle cry will be "Total extermination of the Thals!"

- General Ravon (Guy Siner, http://guysiner.com/)
  Dr. Who: Genesis of the Daleks (https://www.bbc.co.uk/programmes/p00vd5g2)
  Copyright 1975 BBC (https://www.bbc.co.uk/)

When victory is ours, we'll wipe every trace of the Thals and their city from the face of this land. We will avenge the deaths of all Kaleds who've fallen in the cause of right and justice and build a peace which will be a monument to their sacrifice. Our battle cry will be "Total extermination of the Thals!"

- General Ravon (Guy Siner, http://guysiner.com/)
  Dr. Who: Genesis of the Daleks (https://www.bbc.co.uk/programmes/p00vd5g2)
  Copyright 1975 BBC (https://www.bbc.co.uk/)

When victory is ours, we'll wipe every trace of the Thals and their city from the face of this land. We will avenge the deaths of all Kaleds who've fallen in the cause of right and justice and build a peace which will be a monument to their sacrifice. Our battle cry will be "Total extermination of the Thals!"

- General Ravon (Guy Siner, http://guysiner.com/)
  Dr. Who: Genesis of the Daleks (https://www.bbc.co.uk/programmes/p00vd5g2)
  Copyright 1975 BBC (https://www.bbc.co.uk/)

@page "/file-download-2"
@inject IJSRuntime JS

<PageTitle>File Download 2</PageTitle>

<h1>File Download Example 2</h1>

<button @onclick="DownloadFileFromURL">
    Download File From URL
</button>

@code {
    private async Task DownloadFileFromURL()
    {
        var fileName = "quote.txt";
        var fileURL = "/files/quote.txt";
        await JS.InvokeVoidAsync("triggerFileDownload", fileName, fileURL);
    }
}

対話型コンポーネントでは、前述の例のボタンが DownloadFileFromURL ハンドラーを呼び出して JavaScript (JS) 関数 triggerFileDownload を呼び出します。

コンポーネントが静的サーバー側レンダリング (静的 SSR) を採用している場合は、静的サーバー側レンダリング (静的 SSR) を使用する ASP.NET Core Blazor JavaScript のガイダンスに従って triggerFileDownload を呼び出すボタン (addEventListener (MDN ドキュメント)) のイベント ハンドラーを追加します。

@page "/file-download-2"
@inject IJSRuntime JS

<h1>File Download Example 2</h1>

<button @onclick="DownloadFileFromURL">
    Download File From URL
</button>

@code {
    private async Task DownloadFileFromURL()
    {
        var fileName = "quote.txt";
        var fileURL = "https://localhost:5001/files/quote.txt";
        await JS.InvokeVoidAsync("triggerFileDownload", fileName, fileURL);
    }
}

前述の例のポートを、自分の環境の localhost 開発ポートと一致するように変更します。

@page "/file-download-2"
@inject IJSRuntime JS

<h1>File Download Example 2</h1>

<button @onclick="DownloadFileFromURL">
    Download File From URL
</button>

@code {
    private async Task DownloadFileFromURL()
    {
        var fileName = "quote.txt";
        var fileURL = "https://localhost:5001/files/quote.txt";
        await JS.InvokeVoidAsync("triggerFileDownload", fileName, fileURL);
    }
}

前述の例のポートを、自分の環境の localhost 開発ポートと一致するように変更します。