c# - 如何使用 Blazor 在客户端生成和保存文件？

Question

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

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

如何调用 webassembly/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..?)
}

}

Answer 1

Blazor 的创建者史蒂夫桑德森在他最近的一次演讲中使用 JavaScript 互操作来完成类似的任务。

您可以在 BlazorExcelSpreadsheet 上找到示例

解决方案包括三个部分:

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);
    }
}

您可以在 Blazor Fiddle 中看到它的一个 Action