Enterprise-level component library based on Bootstrap and BlazorTable Export
By setting ShowExportButton to display the export button, the component has built-in export Excel function
The export function provides an export callback method OnExportAsync, which can be used to export data by providing a custom export method. If no data export method is provided, the component will export data according to the injected export service
Nuget package installation
use nuget.org Install the BootstrapBlazor.TableExport component
.NET CLI
dotnet add package BootstrapBlazor.TableExport --version 7.1.0PackageReference
<PackageReference Include="BootstrapBlazor.TableExport" Version="7.1.0" />Package Manager
Install-Package BootstrapBlazor.TableExport -Version 7.1.0inject service：
public void ConfigureServices(IServiceCollection services)
{
// Add BootstrapBlazor component
services.AddBootstrapBlazor();
// Add Table Excel export service
services.AddBootstrapBlazorTableExcelExport();
}js file
<script src="_content/BootstrapBlazor.TableExport/js/export.min.js"></script>Table export function
Whether to display the export button by setting the ShowExportButton property, the default is false
Demo
Loading...
Custom export method
You can customize the export method by setting the OnExportAsync callback delegate method. If you don't set it, the built-in export function of the component will be used.
Demo
Loading...
Custom export dropdown button
Customize the content of the export button dropdown box by setting the ExportButtonDropdownTemplate template
Demo
Loading...
@page "/tables/export"
<h3>@Localizer["H1"]</h3>
<h4>@((MarkupString)Localizer["H2"].Value)</h4>
<p>@((MarkupString)@Localizer["P1"].Value)</p>
<Tips>
<div class="mb-2"><b>@Localizer["P2"]：</b></div>
<p><a href="https://www.nuget.org/packages?q=BootstrapBlazor.TableExport" target="_blank">@((MarkupString)@Localizer["P3"].Value)</a></p>
</Tips>
<p><b>@Localizer["P4"]</b></p>
<p>@((MarkupString)Localizer["P5"].Value) <a href="https://www.nuget.org/packages?q=BootstrapBlazor.TableExport" target="_blank">nuget.org</a> @((MarkupString)@Localizer["P6"].Value)</p>
<div class="code-label">.NET CLI</div>
<Pre class="no-highlight">dotnet add package BootstrapBlazor.TableExport --version @Version</Pre>
<div class="code-label">PackageReference</div>
<Pre class="no-highlight"><PackageReference Include="BootstrapBlazor.TableExport" Version="@Version" /></Pre>
<div class="code-label">Package Manager</div>
<Pre class="no-highlight">Install-Package BootstrapBlazor.TableExport -Version @Version</Pre>
<p><b>@Localizer["P7"]：</b></p>
<Pre>public void ConfigureServices(IServiceCollection services)
{
// @Localizer["P8"]
services.AddBootstrapBlazor();
// @Localizer["P9"]
services.AddBootstrapBlazorTableExcelExport();
}</Pre>
<h4>@Localizer["P10"]</h4>
<Pre><script src="_content/BootstrapBlazor.TableExport/js/export.min.js"></script></Pre>
<DemoBlock Title="@Localizer["P11"]" Introduction="@Localizer["P12"]" Name="ShowExportButton">
<Table TItem="Foo"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
ShowToolbar="true" ShowDefaultButtons="false" ShowExportButton="true"
OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@Localizer["P13"]" Introduction="@Localizer["P14"]" Name="Export">
<Table TItem="Foo"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
ShowToolbar="true" ShowDefaultButtons="false" ShowExportButton="true"
OnExportAsync="ExportAsync" OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@Localizer["P15"]" Introduction="@Localizer["P16"]" Name="ExportButtonDropdownTemplate">
<Table TItem="Foo"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
ShowToolbar="true" ShowDefaultButtons="false" ShowExportButton="true"
OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
<ExportButtonDropdownTemplate>
<div class="dropdown-item" @onclick="@ExcelExportAsync">
<i class="fa-regular fa-file-excel"></i>
<span>MS-Excel</span>
</div>
<div class="dropdown-item" @onclick="@CsvExportAsync">
<i class="fa-regular fa-file-excel"></i>
<span>MS-CSV</span>
</div>
</ExportButtonDropdownTemplate>
</Table>
</DemoBlock>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Shared.Services;
namespace BootstrapBlazor.Shared.Samples.Table;
/// <summary>
/// Table 组件数据导出示例
/// </summary>
public partial class TablesExport
{
/// <summary>
/// 获得/设置 版本号字符串
/// </summary>
private string Version { get; set; } = "fetching";
private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };
[NotNull]
private List<Foo>? Items { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<TablesExport>? Localizer { get; set; }
[Inject]
[NotNull]
private VersionService? VersionManager { get; set; }
[Inject]
[NotNull]
private ToastService? ToastService { get; set; }
/// <summary>
/// OnInitialized 方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Items = Foo.GenerateFoo(LocalizerFoo);
}
private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
{
IEnumerable<Foo> items = Items;
// 设置记录总数
var total = items.Count();
// 内存分页
items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
return Task.FromResult(new QueryData<Foo>()
{
Items = items,
TotalCount = total
});
}
private static Task<bool> ExportAsync(IEnumerable<Foo> Items) => Task.FromResult(true);
private async Task ExcelExportAsync()
{
await ToastService.Success("Excel export", "Export Excel data successfully");
}
private async Task CsvExportAsync()
{
await ToastService.Success("CSV export", "Export CSV data successfully");
}
/// <summary>
/// OnInitializedAsync 方法
/// </summary>
/// <returns></returns>
protected override async Task OnInitializedAsync()
{
Version = await VersionManager.GetVersionAsync("bootstrapblazor.tableexport");
}
}
