具有 ReportViewer 导出功能的 Blazor (Wasm)

Posted 2023-03-27

【中文标题】具有 ReportViewer 导出功能的 Blazor (Wasm)

【英文标题】：Blazor (Wasm) with ReportViewer export

【发布时间】：2021-12-01 00:59:11

【问题描述】：

我正在按照此视频中的说明进行操作：https://www.youtube.com/watch?v=7V0Yb5drLgQ

当链接直接放入我剃须刀的组件 html 部分时，一切正常：

RazorComponent

<a type="button" style="margin-left:20px;" class="btn btn-outline-secondary" href="https://localhost:5001/api/Report/GetReport?reportType=1">
        <span class="oi oi-data-transfer-download"></span>&nbsp;&nbsp;@(l.Keys["CPVH_Download_PDF"])
    </a>
</div>

下面是我的 API 的控制器逻辑

服务器接口

   [HttpGet("[action]/reportType")]
    public IActionResult GetReport(int reportType)
    
        var dt = new DataTable();
        dt = employeeService.GetEmployee();

        string mimeType = "";
        int extension = 1;
        var path = $"this._webHostEnvironment.WebRootPath\\Reports\\Report1.rdlc";

        Dictionary<string, string> parameters = new Dictionary<string, string>();

        parameters.Add("param", "RDLC report in Blazor Web Assembly");

        LocalReport localReport = new LocalReport(path);
        
        localReport.AddDataSource("dsEmployee", dt);

        //For Pdf
        if (reportType == 1)
        
            var result = localReport.Execute(RenderType.Pdf, extension, parameters, mimeType);
            return File(result.MainStream, "application/pdf", "myPdf.pdf");
        
        else //if (reportType == 1)
        
            //For Excel
            var result = localReport.Execute(RenderType.Excel, extension, parameters, mimeType);
            return File(result.MainStream, "application/msexcel", "myReport.xls");
        
    

但是，当我将 razor 组件调用包装到调用 Get 或 Post 的服务中时，即使我仍然点击控制器，文件也不会下载。我只收到 Ok 响应，但没有发生文件下载。

服务调用 api

  public async Task GetReport(int reportType)
    
        var httpResponse = await _httpClient.GetAsync($"_httpClient.BaseAddress.ToString()/Report/GetReport/reportType");

        var saveDir = Path.Combine(Path.GetTempPath(), "myPdf.pdf");

        if (httpResponse.IsSuccessStatusCode)
        
            var content = httpResponse.Content.ReadAsByteArrayAsync().Result;
            File.WriteAllBytes(saveDir, content);
        
    

【问题讨论】：

不清楚代码试图做什么。 Razor 组件只包含一个链接。单击它会导航到它的 URL。没有什么可以包装的。仅因为控制器返回二进制文件而下载文件。您可以通过写var bytes=await HttpClient.GetByteArrayAsync("https://localhost:5001/api/Report/GetReport?reportType=1") 来执行相同的操作。如果指定 HttpClient 的基地址为https://localhost:5001/api/Report/GetReport?reportType=1，则可以使用HttpClient.GetByteArrayAsync("GetReport?reportType=1")。

Excel 或 PDF 文件不是文本，因此您不能使用Content.ReadAsStringAsync 阅读它们。您必须使用 ReadAsByteArrayAsync 或 ReadAsStreamAsync

你好@PanagiotisKanavos 谢谢你的帮助！我已经查看了您的 cmets，并在“服务调用对 api 的调用”部分下对我的代码进行了轻微更改。为了回答您的问题，我正在尝试调用 api 并获取报告字节并将它们保存到 blazor 客户端中的文件中。至于包装到您问题的服务部分，目前我将其保留为一个简单的服务，但最终将添加更多代码，包括模型参数，但目前我没有这样做。我仍然面临的问题是没有文件生成到光盘中......

如果我做 _httpClient.GetByteArrayAsync 我不能再使用 httpResponse.Content.ReadAsByteArrayAsync().Result 这只有在 GetAsync 因为 GetByteArrayAsync 结果没有内容属性时才有效。

浏览器还不允许客户端代码访问文件系统。 File System Access API 的早期版本仅适用于 Chrome 和 Edge v86 及更高版本。

【参考方案1】：

我找到了如何使用第三方扩展解决此问题：https://github.com/arivera12/BlazorDownloadFile

_iBlazorDownloadFileService.DownloadFile 获取文件字节并将它们转换为保存在下载文件夹中的文件。

这是我的实现

服务

 public async Task<byte[]> GetReport(int reportType)
 
    var httpResponse = await _httpClient.GetAsync($"_httpClient.BaseAddress.ToString()/Report/GetReport/reportType");
    byte[] content = null;

    if (httpResponse.IsSuccessStatusCode)
        content = httpResponse.Content.ReadAsByteArrayAsync().Result;

    return content;
 

Razor.component

@inject IExportService _iExportService
@inject IBlazorDownloadFileService  _iBlazorDownloadFileService 
      
<a style="margin-left:20px;" class="btn btn-outline-secondary" @onclick="@(async ()=> await GetExport((int)ExportTypesEnum.Pdf))"  >
            <span class="oi oi-data-transfer-download"></span>&nbsp;&nbsp;@(l.Keys["CPVH_Download_PDF"])
        </a>
@code 
    public async Task GetExport(int reportType)
    
        var fileBytes = await _iExportService.GetReport(reportType);
                
        await _iBlazorDownloadFileService.DownloadFile("myPdf.pdf", fileBytes, "application/pdf");

    

【讨论】：

该扩展只做每一个询问如何在 javascript 中下载文件的问题中显示的内容 - 将字节数组传递给 Javascript 函数，创建一个 blob，然后从中创建一个数据 URL，然后单击网址。但是，它没有利用 Blazor 6 中的快速编组或流。实际过程在 Blazor 文档中描述，ASP.NET Core Blazor file downloads。如果您使用http.Content.ReadAsStreamAsync 并将流传递给downloadFileFromStream 会更快

顺便说一句，如果你想相对于HttpClient的基地址进行调用，你不需要重复。你可以写await _httpClient.GetAsync($"Report/GetReport/reportType");