我想要一个单页应用程序，所有工作都在客户端完成，甚至生成一些图表/可视化效果。
我希望能够让用户点击按钮并保存页面上的可视化效果、表格和其他内容（包括可见和不可见的内容，因此右键保存或复制/粘贴并不总是可行的）。
如何从 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..?)
}
}
Blazor 创始人 Steve Sanderson 在他最近的其中一次演示中使用了 JavaScript Interop 来完成类似的任务。
你可以在 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中看到它的实际应用。
<a class="form-control btn btn-primary" href="/download?name=test.txt" target="_blank">Download</a>@page "/download"@model MyNamespace.DownloadModel 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);
}
}
Microsoft.AspNetCore.Mvc.Core NuGet包才能使其正常运行。该包在Blazor WebAssembly项目中默认不包含。 - The Thirsty Ape我创建了一个代码库和NuGet包来解决并简化这个问题，请看一下：https://github.com/arivera12/BlazorDownloadFile
Eugene提出的解决方案有效，但有一个缺点。如果你尝试使用大文件进行操作，浏览器会在将blob下载到客户端时挂起。我发现的解决方案是稍微改变代码，并将文件存储在临时目录中，让服务器使用其机制来提供文件，而不是将其作为blob推送。
在服务器配置中添加：
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(___someTempDirectoryLocation___, "downloads")),
RequestPath = "/downloads"
});
function saveAsFile(filename) {
var link = document.createElement('a');
link.download = filename;
link.href = "/downloads/" + filename;
document.body.appendChild(link); // Needed for Firefox
link.click();
document.body.removeChild(link);
}
Eugene的答案出了一些问题，对我没有起作用。但是现在有官方文档可以告诉你如何做到这一点，非常相似，并且在我的Blazor Server应用程序中运行良好。
将以下JavaScript方法添加到您的_Host.cshtml文件中：
<script type="text/javascript">
async function downloadFileFromStream(fileName, contentStreamReference) {
const arrayBuffer = await contentStreamReference.arrayBuffer();
const blob = new Blob([arrayBuffer]);
const url = URL.createObjectURL(blob);
triggerFileDownload(fileName, url);
URL.revokeObjectURL(url);
}
function triggerFileDownload(fileName, url) {
const anchorElement = document.createElement('a');
anchorElement.href = url;
if (fileName) {
anchorElement.download = fileName;
}
anchorElement.click();
anchorElement.remove();
}
</script>
@using System.IO
@inject IJSRuntime JS
<button @onclick="DownloadFileFromStream">
Download File From Stream
</button>
@code {
private Stream GetFileStream()
{
var randomBinaryData = new byte[50 * 1024];
var fileStream = new MemoryStream(randomBinaryData);
return fileStream;
}
private async Task DownloadFileFromStream()
{
var fileStream = GetFileStream();
var fileName = "log.bin";
using var streamRef = new DotNetStreamReference(stream: fileStream);
await JS.InvokeVoidAsync("downloadFileFromStream", fileName, streamRef);
}
}
我是这样做的:
在一个名为Controllers的文件夹中添加了一个名为DownloadController.cs的新控制器
[Controller, Microsoft.AspNetCore.Mvc.Route("/[controller]/[action]")]
public class DownloadController : Controller
{
private readonly IDataCombinerService DataCombinerService;
private readonly IDataLocatorService DataLocatorService;
public DownloadController(IDataCombinerService dataCombinerService, IDataLocatorService dataLocatorService)
{
DataCombinerService = dataCombinerService;
DataLocatorService = dataLocatorService;
}
[HttpGet]
[ActionName("Accounts")]
public async Task<IActionResult> Accounts()
{
var cts = new CancellationTokenSource();
var Accounts = await DataCombinerService.CombineAccounts(await DataLocatorService.GetDataLocationsAsync(cts.Token), cts.Token);
var json = JsonSerializer.SerializeToUtf8Bytes(Accounts, Accounts.GetType(), new JsonSerializerOptions(JsonSerializerDefaults.Web) { WriteIndented = true });
var stream = new MemoryStream(json);
var fResult = new FileStreamResult(stream, MediaTypeNames.Application.Json)
{
FileDownloadName = $"Account Export {DateTime.Now.ToString("yyyyMMdd")}.json"
};
return fResult;
}
[HttpGet]
public IActionResult Index()
{
return View();
}
}
严格来说，在这里并不需要异步操作，因为它不需要处理其他任何内容，但是当需要在屏幕上显示相同的结果时，该方法被使用。
然后在 Startup.cs 文件中。
app.UseEndpoints(endpoints =>
添加：
endpoints.MapControllerRoute(
name: "default",
defaults: new { action = "Index" },
pattern: "{controller}/{action}");
endpoints.MapControllers();
再次强调，默认值并非必需，它是标准的MVC控制器。
这样就可以像经典的MVC响应一样运行，因此您可以从任何喜欢的来源发送任何文件。最好有一个中间件服务来在视图和下载控制器之间保存临时数据，以便客户端下载相同的数据。