web-dev-qa-db-fra.com

Comment générer et enregistrer un fichier côté client à l'aide de Blazor?

Je veux avoir un SPA qui fait tout le travail côté client et génère même des graphiques/visuels.

J'aimerais pouvoir avoir les boutons de clic de l'utilisateur et enregistrer les visuels, les tableaux et d'autres choses de la page (qui sont à la fois visibles et non visibles, donc cliquer avec le bouton droit sur enregistrer ou copier/coller n'est pas toujours une option).

Comment appeler une fonction de la bibliothèque webassembly/blazor, obtenir ses résultats et l'enregistrer en tant que fichier côté client?

l'idée est quelque chose comme ça ...?

cshtml

<input type="file" onchange="@ReadFile">

<input type="file" onchange="@SaveFile">

@functions{
object blazorObject = new blazorLibrary.SomeObject();

void ReadFile(){
    blazorObject.someFunction(...selectedFile?...);

}
void SaveFile(){
    saveFile(...selectedFile..?)
}

}
c#webwebassemblyblazor
18
shawn.mek
  1. Ajouter un lien
<a class="form-control btn btn-primary" href="/download?name=test.txt" target="_blank">Download</a>
  1. Ajouter une page de rasoir avec un itinéraire
    2.1. Créer une page Razor 'Download.cshtml' ou un autre nom ... 'PewPew.cshtml' ... n'a pas d'importance
    2.2. Mettez le code suivant dans la page créée
    @page "/download"
    @model MyNamespace.DownloadModel
  2. Modifier Download.cshtml.cs fichier
public class DownloadModel : PageModel
{
    public IActionResult OnGet(string name) {
        // do your magic here
        var content = new byte[] { 1, 2, 3 };
        return File(content, "application/octet-stream", name);
    }
}
3
Den

Le créateur de Blazor Steve Sanderson a utilisé l'interopérabilité JavaScript pour une tâche similaire lors d'une de ses dernières présentations.

Vous pouvez trouver un exemple sur BlazorExcelSpreadsheet

La solution comprend trois parties:

1) JavaScript

function saveAsFile(filename, bytesBase64) {
        var link = document.createElement('a');
        link.download = filename;
        link.href = "data:application/octet-stream;base64," + bytesBase64;
        document.body.appendChild(link); // Needed for Firefox
        link.click();
        document.body.removeChild(link);
    }

2) wrapper d'interopérabilité C #

public static class FileUtil
{
    public async static Task SaveAs(IJSRuntime js, string filename, byte[] data)
    {
        await js.InvokeAsync<object>(
            "saveAsFile",
            filename,
            Convert.ToBase64String(data));
    }            
}

3) Appelez depuis votre composant

@inject IJSRuntime js
@functions {
    void DownloadFile() {
        var text = "Hello, world!";
        var bytes = System.Text.Encoding.UTF8.GetBytes(text);
        FileUtil.SaveAs(js, "HelloWorld.txt", bytes);
    }
}

Vous pouvez le voir une action dans Blazor Fiddle

23
Eugene Shmakov