BootstrapBlazor组件库,Table组件导出数据到剪切板

BootstrapBlazor组件库,Table组件导出数据到剪切板

解决方案

使用ClipboardServiceTable数据导出到剪切板中,并且可以直接粘贴到Excel。

这里我直接采用ExportButtonDropdownTemplate添加了2个新的导出选项,一个是导出当前页,一个是导出所有页。

Razor代码

<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 Context="ExportContext">
        <div class="dropdown-item" @onclick="() => CliBoardExportAsync(ExportContext)">
            <i class="fa-regular fa-file-excel"></i>
            <span>导出当前页数据到剪切板</span>
        </div>
        <div class="dropdown-item" @onclick="() => CliBoardExportAllAsync(ExportContext)">
            <i class="fa-regular fa-file-excel"></i>
            <span>导出所有页数据到剪切板</span>
        </div>
    </ExportButtonDropdownTemplate>
</Table>

C#代码

    [Inject]
    [NotNull]
    private ITableExcelExport? Exporter { get; set; }

    [Inject]
    [NotNull]
    private ClipboardService? ClipboardService { get; init; }

    private async Task ToClipBoard( IEnumerable<ITableColumn> columns, IEnumerable<Foo> rows)
    {
        var tableColumns = columns.ToList();
        var fieldNames = tableColumns.Select(x => x.GetFieldName()).ToArray();
        var titles = tableColumns.Select(x => x.GetDisplayName()).ToArray();

        var sb = new StringBuilder();
        sb.AppendJoin('\t',titles).AppendLine();

        foreach (var row in rows)
        {
            var values = fieldNames.Select(x => row.GetType().GetProperty(x)?.GetValue(row)).ToArray();
            sb.AppendJoin('\t',values).AppendLine();
        }

        var result = sb.ToString();
        await ClipboardService.Copy(result);
    }

    private async Task CliBoardExportAsync(ITableExportContext<Foo> context)
    {
        await ToClipBoard(context.Columns,context.Rows);
        await ShowToast(true);
    }

    private async Task CliBoardExportAllAsync(ITableExportContext<Foo> context)
    {
        var option = context.BuildQueryPageOptions();
        var filter = option.ToFilter();
        var data = Items.Where(filter.GetFilterFunc<Foo>());
        await ToClipBoard(context.Columns,data);
        await ShowToast(true);
    }

实现效果

实现效果

注意事项

没有注意事项O(∩_∩)O

posted @ 2023-10-28 09:29  代码搬运工lee  阅读(205)  评论(2编辑  收藏  举报