Saltar al contenido

¿Cómo se puede generar y guardar un archivo del lado del cliente usando Blazor?

Posteriormente a consultar con expertos en el tema, programadores de deferentes áreas y maestros hemos dado con la respuesta al dilema y la plasmamos en este post.

El creador de Blazor, Steve Sanderson, usó la interoperabilidad de JavaScript para una tarea similar durante una de sus últimas presentaciones.

Puede encontrar un ejemplo en BlazorExcelSpreadsheet

La solución incluye tres partes:

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) contenedor de interoperabilidad C#

public static class FileUtil

    public async static Task SaveAs(IJSRuntime js, string filename, byte[] data)
    
        await js.InvokeAsync(
            "saveAsFile",
            filename,
            Convert.ToBase64String(data));
                


3) Llame desde su componente

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

Puedes verlo una acción en Blazor Fiddle

  1. Añadir un enlace
Download

  1. Agregar Razor Page con una ruta
    2.1. Crear página de Razor ‘Descargar.cshtml‘ u otro nombre… ‘PewPew.cshtml‘… no importa
    2.2. Poner el siguiente código en la página creada.
    @page "/download"
    @model MyNamespace.DownloadModel
  2. Editar Descargar.cshtml.cs expediente
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);
    

Creé un paquete de repositorio y nuget que resuelve y simplifica este problema, eche un vistazo: https://github.com/arivera12/BlazorDownloadFile

Si para ti ha resultado útil nuestro post, te agradeceríamos que lo compartas con otros juniors de esta forma nos ayudas a extender nuestra información.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags :

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Respuestas a preguntas comunes sobre programacion y tecnología