19

I have created an HttpGet in my Server-API which creates a CSV-File and returns it with FileStreamResult:

[HttpGet]
public IActionResult Get() {
    // do logic to create csv in memoryStream

    return new FileStreamResult(memoryStream, "text/csv;charset=utf-8") {
        FileDownloadName = "products.csv",
    };
}

In my Blazor-Client App, I have created a Button with a handler:

private async Task DownloadCatalog() {
    var file = HttpClient.GetAsync("api/csvProduct");

    // ... how do I download the file in the browser?
}

The Get in the Controller is called, but I don't know what to do so that the file is downloaded in the browser after the api call.

4
  • did some search, you can either invoke javascript or Navigation.NavigateTo(the api endpoint teturning File)
    – Lei Yang
    Jul 15, 2021 at 12:00
  • complete coded example in .NET 5 based on accepted answer: github.com/tysongibby/BlazorExcelFileDownload Dec 13, 2022 at 21:26
  • @TysonGibby What's the currently there (commit 8242e35) doesn't compile. You have to go back on version back. Jun 26 at 21:33
  • @zumalifeguard This has been fixed. I had stopped mid-update and forgot to finish it. It is now also based on .NET 6. Jul 13 at 19:55

4 Answers 4

39

Browsers don't allow scripts to write to the file system, whether written in JavaScript or WebAssembly. The download dialog is displayed by the browser only when the user clicks on a link.

Using a link button

If the final file is returned directly from the server, the easiest solution is to use a link button with a URL to the API endpoint, possibly calculated at runtime. You can use the download attribute to specify a file name. When the user clicks on the link, the file will be retrieved and saved using the download name

For example :

<a id="exportCsv" class="btn" href="api/csvProduct" download="MyFile.csv" 
   role="button" target="=_top">Export to CSV</a>

or

@if (_exportUrl != null)
{
    <a id="exportCsv" class="btn" href="@_exportUrl" download="MyFile.csv" 
       role="button" target="=_top">Export to Csv</a>
}

...
int _productId=0;
string? _exportUrl=null;

async Task Search()
{
   //Get and display a product summary
   _model=await GetProductSummary(_productId);
   //Activate the download URL 
   _exportUrl = $"api/csvProduct/{_productId}";
}

Using a dynamically generated data link

If that's not possible, you have to create a link element in JavaScript with a data URL, or a Blob, and click it. That's SLOOOOW for three reasons :

  1. You're making an in-memory copy of the downloaded file that's at least 33% larger than the original.
  2. JS interop data marshalling is slow, which means that passing the bytes from Blazor to Javascript is also slow.
  3. Byte arrays are passed as Base64 strings. These need to be decoded back into a byte array to be used as blobs.

The article Generating and efficiently exporting a file in a Blazor WebAssembly application shows how to pass the bytes without marshaling using some Blazor runtime tricks.

If you use Blazor WASM, you can use use InvokeUnmarshalled to pass a byte[] array and have it appear as a Uint8Array in JavaScript.

    byte[] file = Enumerable.Range(0, 100).Cast<byte>().ToArray();
    string fileName = "file.bin";
    string contentType = "application/octet-stream";

    // Check if the IJSRuntime is the WebAssembly implementation of the JSRuntime
    if (JSRuntime is IJSUnmarshalledRuntime webAssemblyJSRuntime)
    {
        webAssemblyJSRuntime.InvokeUnmarshalled<string, string, byte[], bool>("BlazorDownloadFileFast", fileName, contentType, file);
    }
    else
    {
        // Fall back to the slow method if not in WebAssembly
        await JSRuntime.InvokeVoidAsync("BlazorDownloadFile", fileName, contentType, file);
    }

The BlazorDownloadFileFast JavaScript method retrieves the array, converts it to a File and then, through URL.createObjectURL to a safe data URL that can be clicked :

function BlazorDownloadFileFast(name, contentType, content) {
    // Convert the parameters to actual JS types
    const nameStr = BINDING.conv_string(name);
    const contentTypeStr = BINDING.conv_string(contentType);
    const contentArray = Blazor.platform.toUint8Array(content);

    // Create the URL
    const file = new File([contentArray], nameStr, { type: contentTypeStr });
    const exportUrl = URL.createObjectURL(file);

    // Create the <a> element and click on it
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.href = exportUrl;
    a.download = nameStr;
    a.target = "_self";
    a.click();

    // We don't need to keep the url, let's release the memory
    // On Safari it seems you need to comment this line... (please let me know if you know why)
    URL.revokeObjectURL(exportUrl);
    a.remove();
}

With Blazor Server, marshaling is unavoidable. In this case the slower BlazorDownloadFile method is called. The byte[] array is marshaled as a BASE64 string which has to be decoded. Unfortunately, JavaScript's atob and btoa functions can't handle every value so we need another method to decode Base64 into Uint8Array:

function BlazorDownloadFile(filename, contentType, content) {
    // Blazor marshall byte[] to a base64 string, so we first need to convert the string (content) to a Uint8Array to create the File
    const data = base64DecToArr(content);

    // Create the URL
    const file = new File([data], filename, { type: contentType });
    const exportUrl = URL.createObjectURL(file);

    // Create the <a> element and click on it
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.href = exportUrl;
    a.download = filename;
    a.target = "_self";
    a.click();

    // We don't need to keep the url, let's release the memory
    // On Safari it seems you need to comment this line... (please let me know if you know why)
    URL.revokeObjectURL(exportUrl);
    a.remove();
}

And the decoder function, borrowed from Mozilla's Base64 documentation

// Convert a base64 string to a Uint8Array. This is needed to create a blob object from the base64 string.
// The code comes from: https://developer.mozilla.org/fr/docs/Web/API/WindowBase64/D%C3%A9coder_encoder_en_base64
function b64ToUint6(nChr) {
  return nChr > 64 && nChr < 91 ? nChr - 65 : nChr > 96 && nChr < 123 ? nChr - 71 : nChr > 47 && nChr < 58 ? nChr + 4 : nChr === 43 ? 62 : nChr === 47 ? 63 : 0;
}

function base64DecToArr(sBase64, nBlocksSize) {
  var
    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""),
    nInLen = sB64Enc.length,
    nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2,
    taBytes = new Uint8Array(nOutLen);

  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
    nMod4 = nInIdx & 3;
    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
    if (nMod4 === 3 || nInLen - nInIdx === 1) {
      for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
        taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
      }
      nUint24 = 0;
    }
  }
  return taBytes;
}

Blazor 6

The ASP.NET Core 6 Preview 6 that was released recently no longer marshals byte[] as a Base64 string. It should be possible to use the following function

function BlazorDownloadFile(filename, contentType, data) {

    // Create the URL
    const file = new File([data], filename, { type: contentType });
    const exportUrl = URL.createObjectURL(file);

    // Create the <a> element and click on it
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.href = exportUrl;
    a.download = filename;
    a.target = "_self";
    a.click();

    // We don't need to keep the url, let's release the memory
    // On Safari it seems you need to comment this line... (please let me know if you know why)
    URL.revokeObjectURL(exportUrl);
    a.remove();
}
15
  • 1
    Is there any way to modify this code so that the file is opened for viewing instead of downloaded? So, if the file happens to be an image, it is opened in the user's default image viewer, and if it is an XML, it is opened in the default browser (or another app depending on the settings), etc.?
    – Tim
    Aug 9, 2021 at 19:37
  • This is genius.. Must be the _top or role=button... saved me from doing all that nastiness you posted above
    – Tim Davis
    Oct 5, 2021 at 5:17
  • @TimDavis I didn't invent this and the code is still nasty. There's a draft File System API but few browsers support it yet. showSaveFilePicker is supported only on recent Chrome and Edge versions Oct 5, 2021 at 13:59
  • Thank you so much for sharing this, especially the excellent update for .NET 6 Nov 18, 2021 at 12:17
  • 2
    complete coded example in .NET 5: github.com/tysongibby/BlazorExcelFileDownload Dec 13, 2022 at 21:25
8

In order to download file you have to use Microsoft JSInterop. There are many ways to implement your request. One way that i use, is to get the file as byte array then convert it to base64string. Finally call the function that you created in javascript.

In server side

js.InvokeVoidAsync("jsSaveAsFile",
                        filename,
                        Convert.ToBase64String(GetFileByteArrayFunction())
                        );

And in javascript file in wwwroot you create a function

function jsSaveAsFile(filename, byteBase64) {
var link = document.createElement('a');
link.download = filename;
link.href = "data:application/octet-stream;base64," + byteBase64;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);}
2
  • thank you, this works very good. Small note: this only worked for me when I placed this code inside the @code { } section on the razor page. It did not work when placed in the code behind.
    – Allie
    Nov 5, 2021 at 12:40
  • The function jsSaveAsFile is placed on <scritps> section and it is called on Index.html It is not necessary to call it from code section, it is up to you. I call it from class where i generate the file.
    – Baskovli
    Nov 5, 2021 at 13:33
2

use the NavigationManager

@inject NavigationManager NavigationManager

private async Task DownloadCatalog() {
    NavigationManager.NavigateTo("api/csvProduct",true);
}
1
  • But what to do when the document opens in a new tab, when I want it downloaded? Apr 18 at 13:30
0

When you do HttpClient.GetAsync the Blazor runtime gets the file. But it cannot directly save the file to the disk as a Browser environment (in which Blazor runs) does not have access to the disk.

So you will have to use some Javascript Interop to trigger the file download feature of the browser. You can generate a link data:text/plain;charset=utf-8,<<content of the file>> and invoke click on it.

1
  • This is limited to the 2k URL length so not as useful as it may seem. Nov 15 at 10:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.