Bootstrap 与 Angular 表格转 Excel

2026-06-16

为什么普通复制会失败

很多现代后台不用 <table>,而是用:

  • Bootstrap:<div class="row"> + <div class="col">
  • Angular:ngx-datatabledatatable-header-celldatatable-body-cell
  • 通用:带 role="gridcell" 的 div 布局

浏览器直接复制时,Excel 往往无法识别列边界,所有内容堆在一列。

ComTools 的识别策略

HTML 转 Excel 内置多种解析器:

布局类型 识别方式
标准 table <tr> / <th> / <td>
Bootstrap .row 为行,.col 为列
ngx-datatable datatable-header-celldatatable-body-cell
无障碍表格 role="table"role="gridcell"

解析后会自动去掉空 leading 列,并规范化单元格空白。

Bootstrap 示例

<div class="container">
  <div class="row">
    <div class="col">姓名</div>
    <div class="col">部门</div>
    <div class="col">工号</div>
  </div>
  <div class="row">
    <div class="col">王五</div>
    <div class="col">研发</div>
    <div class="col">E001</div>
  </div>
</div>

复制整个 container 的 outerHTML 粘贴到工具即可。

ngx-datatable 示例

Angular 项目常见结构:

<ngx-datatable>
  <datatable-header>
    <datatable-header-cell>产品</datatable-header-cell>
    <datatable-header-cell>库存</datatable-header-cell>
  </datatable-header>
  <datatable-body>
    <datatable-body-row>
      <datatable-body-cell>键盘</datatable-body-cell>
      <datatable-body-cell>120</datatable-body-cell>
    </datatable-body-row>
  </datatable-body>
</ngx-datatable>

工具会读取 .datatable-header-cell-label、链接文本等,避免复制到排序图标。

导出后下一步

  • 需要入库:导出 .xlsxExcel 转 SQL
  • 只需查询 ID:在预览区选中列 → 「复制选中为 WHERE IN」

相关文章