如何使用 Blazor 生成并保存文件客户端？

我想要一个 SPA 来完成客户端的所有工作，甚至生成一些图表/视觉效果。

我希望能够让用户单击按钮并保存页面中的视觉效果、表格和其他内容（既可见又不可见，因此右键单击保存或复制/粘贴并不总是一个选项）。

如何从 web assembly/blazor 库调用函数，获取其结果并将其保存为客户端的文件？

这个想法是这样的......？

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..?)
}

}

Blazor 的创建者 Steve Sanderson 在他最近的一次演讲中使用 JavaScript 互操作来完成类似的任务。

您可以在以下位置找到示例Blazor Excel 电子表格

解决方案包括三部分：

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) 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) 从您的组件调用

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

你可以看到它的一个动作布拉佐小提琴