web-dev-qa-db-ja.com

Blazorを使用してファイルクライアント側を生成および保存するにはどうすればよいですか？

クライアント側ですべての作業を実行し、グラフやビジュアルを生成する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..?)
}

}
c#webwebassemblyblazor
18
shawn.mek
  1. リンクを追加
<a class="form-control btn btn-primary" href="/download?name=test.txt" target="_blank">Download</a>
  1. ルートでRazorページを追加する
    2.1。 Razorページの作成 'Download.cshtml'または別の名前... 'PewPew.cshtml' ...は問題ではありません
    2.2。作成したページに次のコードを入れます
    @page "/download"
    @model MyNamespace.DownloadModel
  2. 編集Download.cshtml.csファイル
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

Blazorの作成者であるSteve Sandersonは、前回のプレゼンテーションの1つで、同様のタスクにJavaScriptの相互運用を使用しました。

BlazorExcelSpreadsheet で例を見つけることができます

ソリューションには3つの部分があります。

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 でアクションを確認できます

23
Eugene Shmakov