首页 > 其他分享 >BootstrapBlazor组件库,Table组件导出数据到剪切板

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

时间:2023-10-28 09:46:41浏览次数:26  
标签:await 导出 private var BootstrapBlazor context 剪切板 组件

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

标签:await,导出,private,var,BootstrapBlazor,context,剪切板,组件
From: https://www.cnblogs.com/codecopier/p/17793650.html

相关文章

  • [ApacheCommon组件使用-IO]关于JavaIO,相当输入的一个工具就是ApacheCommon-IO
    1.首先,如果你使用的是maven或者gradle建立的项目,maven只需要<!--https://mvnrepository.com/artifact/commons-io/commons-io--><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId>......
  • [Vue学习]Vue组件学习
    组件的概念:页面可重复使用的抽象。拓展html在构建应用时候的不足。组件化开发 步骤  1.定义组件  2.App.vue中script里引入组件 importxxxx from'xxxxx'3.在components中注册组件  4.在模板中使用  ......
  • VUE+Ant 自定义cron组件,显示最近运行时间
    先上效果图 自定义组件<template><a-modaltitle="corn表达式":width="modalWidth":visible="visible":confirmLoading="confirmLoading"@ok="handleSubmit"@cancel="close"......
  • 不使用构建工具的vue组件书写方式
    将vue组件转换为普通的js文件(IIFE)先写个简单的,使用ESM方式组织的componentexportdefault{data(){return{count:0}},template:`<button@click="count++">Youclickedme{{count}}times.</button>`}我们把这个组件保存为mycomponent.js这个组件......
  • 报表组件DevExpress Reporting中文教程 - 如何直接在浏览器中生成报表?
    DevExpressReports组件被设计为一个跨平台的报表解决方案,您可以创建一次报表,然后将文档显示、打印和导出到任何受支持的.NET平台中,用户体验扩展到部署应用程序的所有托管环境/操作系统。DevExpressReporting是.NETFramework下功能完善的报表平台,它附带了易于使用的VisualStud......
  • OpenTiny Vue 3.11.0 发布:增加富文本、ColorPicker等4个新组件,迎来了贡献者大爆发!
    你好,我是Kagol。非常高兴跟大家宣布,2023年10月24日,OpenTinyVue发布了v3.11.0......
  • Hutool日志组件配合testng+slf4j的简单使用
    Hutool是一个Java工具包类库,对文件、流、加密解密、转码、正则、线程、XML等JDK方法进行封装,组成各种Util工具类,地址是https://hutool.cn/具体的用法和api文档在页面上有,就不赘述了,这里只分享在使用testng做单元测试时Hutool-log的简单使用,文档上写得比较简陋,也不太好理解首先是......
  • Vue3 子组件修改父组件传过来的值
    Vue3子组件修改父组件传过来的值1、在父组件中,找到引用的子组件,在引用中加入v-model例如:子组件是demo,需要穿的值为num这个有个温馨提示,(v-model+冒号+需要穿的值)这个v-model可以写多个<demov-model:num="num"></demo>//例如可以写多个需要修改多个传入的值<demov-mo......
  • BootstrapBlazor组件库,Clipboard剪切板服务
    BootstrapBlazor组件库,Clipboard剪切板服务组件介绍本Blazor组件依赖于BootstrapBlazor组件库。使用该组件之前需要先安装BootstrapBlazor组件库。可以通过nuget命令行安装dotnetaddpackageBootstrapBlazor--version7.x或者双击项目名称直接添加ItemGroup<ItemGroup......
  • 需要使用WinDbg工具来分析windows系统产生的dump文件,此工具属于Windows SDK的一个组件
    需要使用WinDbg工具来分析windows系统产生的dump文件,此工具属于WindowsSDK的一个组件,在微软官方网站可以下载(链接)。 使用WinDbg分析Windowsdump文件方法_windbg分析dump文件_谁能懂我2011的博客-CSDN博客......