Blazor export to excel

Question

我正试图在我的blazor服务器端应用程序上添加一个导出到excel按钮。到目前为止，在互联网上搜索后，这就是我所做的。

我的按钮

<div class="row text-right">
<div class="col-12 p-3">
<button class="btn btn-outline-success" @onclick="@(() =>DownloadExcel(formValues.Region, formValues.startDate, formValues.endDate))">
Export to Excel&nbsp;
<i class="fa fa-file-excel" aria-hidden="true"></i>
</button>
</div>
</div>

我的方法在我的.剃须刀页

public FileResult DownloadExcel(string Region, DateTime StartDate, DateTime EndDate)
{
FileResult ExcelFile = searchService.ExportToExcel(Region, StartDate, EndDate);
return ExcelFile;
}

最后我的逻辑在我的服务

public FileResult ExportToExcel(string Region, DateTime StartDate, DateTime EndDate)
{
var queryable = context.AuditCardPinrecords.Where(s => Region == s.RegionRecordId)
.Where(s => s.AuditComplete == true)
.Where(s => s.DateTime >= StartDate && s.DateTime <= EndDate).AsQueryable();
var stream = new MemoryStream();
using (var package = new ExcelPackage(stream))
{
var workSheet = package.Workbook.Worksheets.Add("Sheet1");
workSheet.Cells.LoadFromCollection(queryable, true);
package.Save();
}

string excelName = $"AuditPinRecords-{DateTime.Now.ToString("yyyyMMddHHmmssfff")}.xlsx";
return File(stream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", excelName); 
}

我的预期结果是下载excel文件。不幸的是，点击按钮时什么也没发生。如有任何建议，我们将不胜感激。谢谢

Answer 1

我也有类似的需求，能够从这个项目中通过javascript拼凑出如何做到这一点：https://github.com/timplourde/dcidr-blazor

静态公用事业服务：

public static class ExcelService
{
public static byte[] GenerateExcelWorkbook()
{
var list = new List<UserInfo>()
{
new UserInfo { UserName = "catcher", Age = 18 },
new UserInfo { UserName = "james", Age = 20 },
};
var stream = new MemoryStream();
// ExcelPackage.LicenseContext = LicenseContext.NonCommercial;
using (var package = new ExcelPackage(stream))
{
var workSheet = package.Workbook.Worksheets.Add("Sheet1");
// simple way
workSheet.Cells.LoadFromCollection(list, true);
////// mutual
////workSheet.Row(1).Height = 20;
////workSheet.Row(1).Style.HorizontalAlignment = ExcelHorizontalAlignment.Center;
////workSheet.Row(1).Style.Font.Bold = true;
////workSheet.Cells[1, 1].Value = "No";
////workSheet.Cells[1, 2].Value = "Name";
////workSheet.Cells[1, 3].Value = "Age";
////int recordIndex = 2;
////foreach (var item in list)
////{
////    workSheet.Cells[recordIndex, 1].Value = (recordIndex - 1).ToString();
////    workSheet.Cells[recordIndex, 2].Value = item.UserName;
////    workSheet.Cells[recordIndex, 3].Value = item.Age;
////    recordIndex++;
////}
return package.GetAsByteArray();
}
}
}
public class UserInfo
{
public string UserName { get; set; }
public int Age { get; set; }
}

在wwwroot文件夹中创建一个带有site.js文件的js文件夹

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

在_Host.cshtml文件中，在正文部分中添加以下脚本

<script src="~/js/site.js"></script>

在你想从导出到excel的.rarzor页面中

@using YOUR_APP_NAME.Services
@inject IJSRuntime js
<Row Class="d-flex px-0 mx-0 mb-1">
<Button Clicked="@DownloadExcelFile" class="p-0 ml-auto mr-2" style="background-color: transparent" title="Download">
<span class="fa fa-file-excel fa-lg m-0" style="color: #008000; background-color: white;" aria-hidden="true"></span>
</Button>
</Row>
@code {
private void DownloadExcelFile()
{
var excelBytes = ExcelService.GenerateExcelWorkbook();
js.InvokeVoidAsync("saveAsFile", $"test_{DateTime.Now.ToString("yyyyMMdd_HHmmss")}.xlsx", Convert.ToBase64String(excelBytes));
}
}

Answer 2

.rarzor组件不像MVC视图那样是HTTP端点。您返回的FileResult不会触发浏览器下载。

您将需要创建一个MVC控制器操作并将用户重定向到那里，或者使用JavaScript来调用文件保存操作。然后，您需要使用JavaScriptInterop来调用JS函数。

window.msSaveBlob = function (payload, filename) {
const createBlob = data => new Blob([data], { type: "text/csv;charset=utf-8;" });
const buildDownloadLink = (blob, fileName) => {
let link = document.createElement("a");
link.setAttribute("href", URL.createObjectURL(blob));
link.setAttribute("download", fileName);
link.style = "visibility:hidden";
return link;
};
const invokeDownload = link => {
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const isHtmlDownloadAllowed = document.createElement("a").download !== undefined;
const isSaveBlobAllowed = navigator.msSaveBlob;
isSaveBlobAllowed ? navigator.msSaveBlob(createBlob(payload), filename) :
isHtmlDownloadAllowed ? invokeDownload(buildDownloadLink(createBlob(payload), filename)) :
console.log("Feature unsupported");
};

当然，也有商业图书馆来帮助处理这些类型的事情。Blazor文档处理的Telerik UI