Как можно сгенерировать и сохранить на стороне клиента файл с помощью Blazor? - PullRequest
Новая
       53

Как можно сгенерировать и сохранить на стороне клиента файл с помощью Blazor?

0 голосов
/ 07 октября 2018

Я хочу иметь 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..?)
}

}

1 Ответ

0 голосов
/ 17 декабря 2018

Создатель 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 # interop wrapper 

public static class FileUtil
{
    public static Task SaveAs(string filename, byte[] data)
        => JSRuntime.Current.InvokeAsync<object>(
            "saveAsFile",
            filename,
            Convert.ToBase64String(data));
}

3) Вызов из вашего компонента 

FileUtil.SaveAs("Filename.dat", new byte[] {});

Вы можете видетьэто действие в Blazor Fiddle

...