实现 bootstrap-table csv 导出到 Angular 15 项目

Question

我正在尝试为 Angular 项目实现 bootstrab-table 表导出扩展，但到目前为止还没有成功

https://live.bootstrap-table.com/example/extensions/export.html

任何帮助或示例都会有很大帮助

提前致谢

请是我在角度项目中尝试过的

html 文件

<div class="container">
<h1>Run Details</h1>

<div id="toolbar">
    <select class="form-control">
    <option value="basic">Export Basic</option>
    <option value="all">Export All</option>
    <option value="selected">Export Selected</option>
    </select>
</div>

<table
    id="table"
    data-toggle="table"
    data-search="true"
    data-flat="true"
    data-show-columns="true"
    data-show-multi-sort="true"
    class="table table-striped">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id" data-sortable="true">ID</th>
        <th data-field="project" data-sortable="true">Project</th>
        <th data-field="test_result" data-sortable="true">Hypothesis</th>
        <th data-field="num_passes" data-sortable="true">Run Path</th>
        <th data-field="user_name" data-sortable="true">User Name</th>
    </tr>
    </thead>
</table>
</div>

<ngx-spinner type="ball-scale-multiple"></ngx-spinner>

下面是初始化表的两个函数

ngAfterViewChecked(): void {
    if (this.runData.length > 0 && !this.isTableInitialized) {
    $('#table').bootstrapTable('destroy').bootstrapTable(
        {
        data:this.runData,
        filterControl: true,
        showSearchClearButton: true,
        search: true,
        showColumns: true,
        showColumnsSearch: true,
        pagination: true,
        exportDataType: 'all',
        showExport: true,
        exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
        }
    );
    this.isTableInitialized = true;
    }
}

ngOnInit(): void {
    this.spinner.show()
    this.appService.get_data('get_all_runs').subscribe(
    (data:any )=>{

        if (data['result'] == 'SUCCESS'){
        this.runData = data['rows']
        }
        console.log(this.runData )
        this.spinner.hide()
    }, (error)=>{
        console.log(error)
        this.spinner.hide()
    }
    )
}

Answer 1

试试这个。

https://stackblitz.com/edit/stackblitz-starters-wobvc1?file=package.json

index.html

您必须包含所有这些脚本标签。

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/tableExport.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/jsPDF/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extensions/export/bootstrap-table-export.min.js"></script>

并在 head 标签中包含相关的 CSS 文件。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.css"
/>

main.ts

这包括您的代码从网络服务器提取数据并通过以下配置加载引导表，

$('#table')
  .bootstrapTable('destroy')
  .bootstrapTable({
    exportDataType: 'all',
    data: this.runData,
    filterControl: true,
    showSearchClearButton: true,
    search: true,
    showColumns: true,
    showColumnsSearch: true,
    pagination: true,
    exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
  });

参考：

https://examples.bootstrap-table.com/index.html#extensions/export.html#view-source

注意： 列名称必须与 HTML 中的 data-field 属性以及 typescript 中 runData 对象的“rows”数组键匹配。