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

Question

我正在按照此视频中的说明进行操作：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);
        }
    }

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

    }
}