Home > other >  blazor WASM create and download a file
blazor WASM create and download a file

Time:01-11

I have a class that can be serialized into a json file I want to allow users to download the json file.

How can I generate a file in memory and then have the browser download it ??

I guess I need to have a stream of some sort, but how do I make it download afterward? I would love to avoid JS since I have no knowledge about it

CodePudding user response:

Heres how I did it in my project with JS Interop and System.Text.Json. This code has not been used by me in a couple of months though and I can't test it right now. But it did work when I added it.

C#

using System.Text.Json;
using Microsoft.JSInterop;

...

async Task downloadObject(object objectToSave, string fileName)
{
    var obj = JsonSerializer.Serialize(objectToSave);
    var fileStream = new MemoryStream(new UTF8Encoding(true).GetBytes(obj));
    using var streamRef = new DotNetStreamReference(stream: fileStream);
    await JSRuntime.InvokeVoidAsync("downloadFileFromStream", fileName, streamRef);
}

JavaScript

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;

    if (fileName) {
        anchorElement.download = fileName;
    }

    anchorElement.click();
    anchorElement.remove();
    URL.revokeObjectURL(url);
}

CodePudding user response:

Here's one way to achieve this, but one common approach is to use the Content-Disposition HTTP header to specify that the response should be treated as a file attachment. This will typically cause the browser to prompt the user to download the file.

Here's an example of how you might do this in a Python web application using the Flask framework:

from flask import Flask, Response
import json

app = Flask(__name__)

@app.route('/download')
def download():
    data = {'some': 'data'}
    json_data = json.dumps(data)
    response = Response(json_data,
                        content_type='application/json',
                        headers={'Content-Disposition': 'attachment;filename=data.json'})
    return response

In this example, the download route generates a JSON representation of some data, then creates a Response object with the JSON data as the body, the content type set to application/json, and the Content-Disposition header set to attachment;filename=data.json. This tells the browser to treat the response as a file attachment with the name "data.json", so the user will be prompted to download the file.

You can replace data dictionary with your class and serialize it using json.dumps() method or using any other json serializer of your choice.

Make sure your class has __dict__ method or json serializable before serializing it.

Also, you can also use other libraries such as werkzeug or send_file for this purpose

  • Related