Blazor 中如何下载文件到浏览器

独立观察员

发布于 2022-12-06 18:42:30

2.4K0

发布于 2022-12-06 18:42:30

文章被收录于专栏：独立观察员博客独立观察员博客

Blazor 中如何下载文件到浏览器

一、前言

二、方法一（导航跳转）

三、方法二（下载后传出）

(一) 使用 RestSharp 下载

(二) 使用 BlazorDownloadFile 传出

独立观察员 2021 年 3 月 28 日

一、前言

最近想给之前文章《下载中转加速器 VPSDownloader.NET（.NET Core 程序部署到 Linux 系统）》中提到的 VPS 文件中转下载服务添加一个前端页面，其实之前也想使用热门的前端框架 Vue 来做，也做了点工作了，但是毕竟不是前端开发，上手起来还是比较慢的，而且引入了 NodeJS 等技术栈，和后端的 ASP.NET Core WebApi 也不共存于一个项目，开发和维护起来不太方便。后来了解到了发展如火如荼的 Blazor 框架，这个是微软开发的 .NET 领域的前端框架，在某种程度上和以前的 WebForm 有点类似，不过以前那个是微软自己搞的，大家都不待见它，现在这个是符合 Web 领域新标准 WebAssembly，而且 UI 方面也可以使用现有的成熟库。总之，使用 Blazor，可以使用 C# 代码来代替（当然也是兼容的）JavaScript 代码，使 .NET 开发人员能有极致的全栈开发体验，颠覆以往那种 “师夷长技以制夷” 的前端开发方式，所以决定学习使用一下。另外，本文的 Blazor 项目使用 Blazor Server 模式，而不是 Blazor WebAssembly 模式。

先来前情回顾一下，关键就是 WebApi 项目提供了一个 Download 控制器的 Get 方法：

/// <summary>
/// 通过 HttpClient 获取另外站点的文件流，再输出
/// </summary>
[HttpGet]
publicasync Task<IActionResult>Get(string url)
{
    if(string.IsNullOrWhiteSpace(url))
    {
        _logger.LogTrace("下载地址为空！");
        returnContent("请在链接后跟上下载地址后再次访问");
    }

    try
    {
        // 解决 CentOS7 Https 下载地址出错的问题；
        var httpClientHandler = new HttpClientHandler
        {
            ServerCertificateCustomValidationCallback = (message, certificate2, arg3, arg4) =>true
        };

        using HttpClient client = newHttpClient(httpClientHandler);
        var stream = await client.GetStreamAsync(url);
        returnFile(
            stream,
            "application/octet-stream", // 二进制流
            Path.GetFileName(url));
    }
    catch(Exception ex)
    {
        returnContent($" 出错了：{ex}");
    }
}

之前是使用 Swagger 测试的，实际上用 Postman 也可以测试：

二、方法一（导航跳转）

那么我们在 Blazor 中如何调用呢？先来看个简单的：

可以看到直接使用 Navigation.NavigateTo 跳转到相关 WebApi 地址即可。由于该接口返回二进制流，浏览器就能直接识别进行下载了（动图）：

这种方法只是起个跳转的作用，实际下载动作还是在 WebApi 那边进行，缺点是下载结果不可知，优点是下载过程可见。

这个实际上不是本文讨论的重点，本文讨论的是，使用代替了 JS 代码的 C# 代码来下载文件到浏览器。

三、方法二（下载后传出）

那么如何实现呢？这个要分两步走，第一步是使用代码调用 API 进行下载文件，第二步是使用某种方法把文件通过浏览器传出给用户。

(一) 使用 RestSharp 下载

先来看看第一步，这里我们通过 Postman 得知可以使用 RestSharp 进行调用：

我们通过 NuGet 安装 RestSharp 后，代码可以这样写：

var client = newRestClient($"http://frps.dlgcy.com:5000/Download?url={Url}");
var request = newRestRequest(Method.GET);
var response = await client.ExecuteAsync(request);

if(response.IsSuccessful)
{
    Tips = "下载成功！";

    var content = response.Content;
    var contentBytes = response.RawBytes;

    await BlazorDownloadFileService.DownloadFile(Path.GetFileName(Url), contentBytes, "application/octet-stream");
}
else
{
    Tips = "下载失败！";
}

(二) 使用 BlazorDownloadFile 传出

再来看看第二步，把下载的文件传出给用户，方法就是使用 BlazorDownloadFile 开源方案。

GitHub 地址：https://github.com/arivera12/BlazorDownloadFile

Blazor download files to the browser from c# without any JavaScript library or dependency. BlazorDownloadFile is the solution to saving files on the client-side, and is perfect for web apps that generates files on the client. However if the file is coming from the server we recommend you to first try to use Content-Disposition attachment response header as it has more cross-browser compatibility.

翻译：

在 Blazor 中通过 C#（不使用任何 JS 库和依赖）下载文件到浏览器。

BlazorDownloadFile 是在客户端保存文件的解决方案，它对于在客户端生成文件的应用来说是完美的。

然而如果文件是来自服务端，我们建议您优先使用 Content-Disposition 附件响应头，因为它有更好的跨浏览器兼容性。

1、安装（NuGet）

Install-Package BlazorDownloadFile -Version 2.1.6

2、添加服务

在 Startup 的 ConfigureServices () 中添加：

services.AddBlazorDownloadFile();

3、在 Blazor 的 Razor 页面中使用

// 在页首添加引用：
@using BlazorDownloadFile

// 在 code 中注入：
[Inject] IBlazorDownloadFileService BlazorDownloadFileService {get; set; }

// 使用（这里是先获得了文件的字节数组再调用本方法）
await BlazorDownloadFileService.DownloadFile(Path.GetFileName(Url), contentBytes, "application/octet-stream");

图示：