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

?

圖示：

?

這樣就可以根據下載是否成功來分別處理，成功時傳出文件給用戶，缺點是下載過程用戶不可知，還需優化，效果如下（動圖）：

最后給出源碼地址：

https://gitee.com/dlgcy/VPSDownloader.NET/tree/Blog20210328

?

全文完，感謝閱讀。

總結

以上是生活随笔為你收集整理的Blazor 中如何下载文件到浏览器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。