Megosztás a következőn keresztül:

ASP.NET Core Blazor fájlletöltései

Megjegyzés

Ez nem a cikk legújabb verziója. Az aktuális kiadásról a cikk .NET 10-es verziójában olvashat.

Figyelmeztetés

A ASP.NET Core ezen verziója már nem támogatott. További információ: .NET és .NET Core támogatási szabályzat. A jelen cikk .NET 9-es verzióját lásd az aktuális kiadásért .

Ez a cikk bemutatja, hogyan tölthet le fájlokat Blazor alkalmazásokban.

Fájlletöltések

Ez a cikk a következő forgatókönyvek megközelítéseit ismerteti, ahol egy fájlt nem szabad megnyitnia egy böngészőnek, hanem le kell töltenie és mentenie az ügyfélen:

Ha az alkalmazástól eltérő forrásból tölt le fájlokat, a CORS (Cross-Origin Resource Sharing) szempontokat figyelembe kell venni. További információ: lásd a Forrásközi erőforrás-megosztás (CORS) szakaszt.

Biztonsági szempontok

Legyen óvatos, amikor lehetőséget biztosít a felhasználóknak fájlok letöltésére egy kiszolgálóról. A kiberbűnözők Szolgáltatásmegtagadási (DoS) támadásokat hajthatnak végre, API-kihasználási támadásokat, vagy más módon próbálhatják meg feltörni a hálózatokat és a kiszolgálókat.

A sikeres támadás valószínűségét csökkentő biztonsági lépések a következők:

  • Fájlok letöltése dedikált fájlletöltő területről a kiszolgálón, lehetőleg nem rendszermeghajtóról. A dedikált hely használatával egyszerűbb biztonsági korlátozásokat bevezetni a letölthető fájlokra. Tiltsa le a fájlletöltési területen a végrehajtási engedélyeket.
  • A rosszindulatú felhasználók könnyen megkerülhetik az ügyféloldali biztonsági ellenőrzéseket. Mindig végezzen ügyféloldali biztonsági ellenőrzéseket a kiszolgálón is.
  • Ne fogadjon fájlokat a felhasználóktól vagy más nem megbízható forrásokból, majd tegye elérhetővé a fájlokat azonnali letöltésre anélkül, hogy biztonsági ellenőrzéseket végez a fájlokon. További információért lásd: Fájlok feltöltése ASP.NET Core.

Letöltés streamből

Ez a szakasz általában legfeljebb 250 MB méretű fájlokra vonatkozik.

A viszonylag kis méretű fájlok (< 250 MB) letöltésének ajánlott módszere a fájltartalom streamelése egy nyers bináris adatpufferbe az ügyfélen JavaScript (JS) interop. Ez a megközelítés olyan összetevők esetében hatékony, amelyek interaktív renderelési módot alkalmaznak, de statikus kiszolgálóoldali renderelést (statikus SSR) alkalmazó összetevőkre nem.

A viszonylag kis méretű fájlok (< 250 MB) letöltésének ajánlott módszere a fájltartalom streamelése egy nyers bináris adatpufferbe az ügyfélen JavaScript (JS) interop.

Figyelmeztetés

Az ebben a szakaszban ismertetett megközelítés beolvassa a fájl tartalmát egy JS ArrayBuffer-ba. Ez a módszer betölti a teljes fájlt az ügyfél memóriájába, ami ronthatja a teljesítményt. A viszonylag nagy fájlok (>= 250 MB) letöltéséhez javasoljuk, hogy kövesse a Letöltés URL-címről szakasz útmutatását.

A következő downloadFileFromStreamJS függvény:

  • A megadott adatfolyamot beolvassa a ArrayBuffer-ba.
  • Létrehoz egy Blob-t, hogy körbefuttassa a ArrayBuffer-et.
  • Létrehoz egy objektum URL-címét, amely a fájl letöltési címeként szolgál.
  • Létrehoz egy HTMLAnchorElement (<a> elem).
  • A fájl nevét (fileName) és URL-címét (url) rendeli hozzá a letöltéshez.
  • Aktiválja a letöltést egy click esemény a horgonyelemen való elindításával.
  • Eltávolítja a horgonyelemet.
  • Visszavonja az objektum URL-címét (url) URL.revokeObjectURLmeghívásával. Ez fontos lépés annak érdekében, hogy a memória ne szivárogjon ki az ügyfélen.
<script>
  window.downloadFileFromStream = async (fileName, contentStreamReference) => {
    const arrayBuffer = await contentStreamReference.arrayBuffer();
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);
    const anchorElement = document.createElement('a');
    anchorElement.href = url;
    anchorElement.download = fileName ?? '';
    anchorElement.click();
    anchorElement.remove();
    URL.revokeObjectURL(url);
  }
</script>

Megjegyzés

A JS helyére és az éles alkalmazásokkal kapcsolatos ajánlásainkra vonatkozó általános útmutatásért nézze meg a JavaScript-helyet az ASP.NET Core Blazor alkalmazásokban.

A következő összetevő:

  • Natív byte-streaming interop használatával biztosítja a fájl hatékony átvitelét az ügyfélnek.
  • Van egy GetFileStream nevű metódus, amely egy Stream-et kér le az ügyfelekhez letöltött fájlhoz. Az alternatív módszerek közé tartozik egy fájl lekérése a tárolóból, vagy egy fájl dinamikus létrehozása C#-kódban. Ebben a bemutatóban az alkalmazás létrehoz egy 50 KB-os, véletlenszerű adatokat tartalmazó fájlt egy új bájttömbből (new byte[]). A bájtok egy MemoryStream-val vannak becsomagolva, hogy a példa dinamikusan előállított bináris fájljaként szolgáljanak.
  • A DownloadFileFromStream módszer:
    • Lekéri a Stream-t a GetFileStream-ből.
    • Megadja a fájl nevét, amikor a fájl a felhasználó gépére van mentve. Az alábbi példa a fájl quote.txtnevet adja.
    • Becsomagolja a Stream-t egy DotNetStreamReference-be, amely lehetővé teszi a fájladatok továbbítását a kliensnek.
    • Meghívja a downloadFileFromStreamJS függvényt az ügyfél adatainak elfogadásához.

FileDownload1.razor:

@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

<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);
    }
}

Egy szerveroldali alkalmazás azon komponense, amelynek vissza kell adnia egy fizikai fájl Stream értékét, hívhatja meg a File.OpenRead-et, ahogy azt az alábbi példa mutatja:

private Stream GetFileStream() => File.OpenRead(@"{PATH}");

Az előző példában a {PATH} helyőrző a fájl elérési útja. A @ előtag azt jelzi, hogy a sztring egy szó szerinti sztringkonstans, amely lehetővé teszi a fordított perjelek (\) használatát egy Windows operációs rendszer elérési útján, és beágyazott dupla idézőjeleket ("") egyetlen idézőjelhez az elérési úton. Alternatív megoldásként kerülje a karakterlánc-literált (@), és használja az alábbi módszerek egyikét:

  • Használjon kettős visszaperjeleket (\\) és idézőjeleket (\").
  • Használjon perjeleket (/) az útvonalban, amelyeket az ASP.NET Core-alkalmazások platformjai támogatnak, valamint escapelt idézőjeleket (\").

Letöltés URL-címről

Ez a szakasz a viszonylag nagy, jellemzően 250 MB-os vagy nagyobb fájlokra vonatkozik.

A viszonylag nagy méretű fájlok (>= 250 MB) interaktív módon renderelt összetevőkkel vagy statikusan renderelt összetevőkhöz tetszőleges méretű fájlokkal való letöltésének ajánlott módszere a JS használata a fájl nevével és URL-címével rendelkező horgonyelem aktiválására.

A viszonylag nagy méretű fájlok (>= 250 MB) letöltésének ajánlott módszere, hogy a JS segítségével aktiválják a fájl nevével és URL-címével rendelkező horgonyelemet.

A jelen szakaszban szereplő példa egy quote.txtnevű letöltési fájlt használ, amely egy files nevű mappába kerül az alkalmazás webgyökerében (wwwroot mappában). A files mappa használata csak szemléltetés céljából történik. A letölthető fájlokat a kívánt webes gyökérmappán (wwwroot mappán) belül bármilyen mappaelrendezésben rendszerezheti, beleértve a fájlok közvetlenül a wwwroot mappából való kiszolgálását is.

wwwroot/files/quote.txt:

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/)

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/)

A következő triggerFileDownloadJS függvény:

  • Létrehoz egy HTMLAnchorElement (<a> elem).
  • A fájl nevét (fileName) és URL-címét (url) rendeli hozzá a letöltéshez.
  • Aktiválja a letöltést egy click esemény a horgonyelemen való elindításával.
  • Eltávolítja a horgonyelemet.
<script>
  window.triggerFileDownload = (fileName, url) => {
    const anchorElement = document.createElement('a');
    anchorElement.href = url;
    anchorElement.download = fileName ?? '';
    anchorElement.click();
    anchorElement.remove();
  }
</script>

Megjegyzés

A JS helyére és az éles alkalmazásokkal kapcsolatos ajánlásainkra vonatkozó általános útmutatásért nézze meg a JavaScript-helyet az ASP.NET Core Blazor alkalmazásokban.

Az alábbi példaösszetevő az alkalmazás által használt forrásból tölti le a fájlt. Ha a fájlletöltést egy másik forrásból kíséreli meg, konfigurálja a forrásközi erőforrás-megosztást (CORS). További információ: lásd a Forrásközi erőforrás-megosztás (CORS) szakaszt.

FileDownload2.razor:

@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);
    }
}

Interaktív összetevők esetén az előző példa gombja meghívja a DownloadFileFromURL kezelőt a JavaScript (JS) függvény meghívására triggerFileDownload.

Ha az összetevő statikus kiszolgálóoldali renderelést (statikus SSR) alkalmaz, adjon hozzá egy eseménykezelőt a gombhoz (addEventListener) a triggerFileDownload meghívásához, követve a ASP.NET Core Blazor JavaScript statikus kiszolgálóoldali rendereléssel (statikus SSR) iránymutatásait.

@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);
    }
}

Interaktív összetevők esetén az előző példa gombja meghívja a DownloadFileFromURL kezelőt a JavaScript (JS) függvény meghívására triggerFileDownload.

Ha az összetevő statikus kiszolgálóoldali renderelést (statikus SSR) alkalmaz, adjon hozzá egy eseménykezelőt a gombhoz (addEventListener) a triggerFileDownload meghívásához, követve a ASP.NET Core Blazor JavaScript statikus kiszolgálóoldali rendereléssel (statikus SSR) iránymutatásait.

@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);
    }
}

Módosítsa az előző példában szereplő portot a környezet localhost fejlesztői portjának megfelelőre.

@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);
    }
}

Módosítsa az előző példában szereplő portot a környezet localhost fejlesztői portjának megfelelőre.

Forrásközi erőforrás-megosztás (CORS)

Ha nem szeretné engedélyezni forrásközi erőforrás-megosztást (CORS) olyan fájlok esetében, amelyek nem azonosak az alkalmazással, a fájlok letöltése nem felel meg a böngésző által végzett CORS-ellenőrzéseknek.

További információ a CORS-ról ASP.NET Core-alkalmazásokkal és más, letöltésre fájlokat üzemeltető Microsoft-termékekkel és szolgáltatásokkal kapcsolatban:

További erőforrások

  • Last updated on