为什么普通复制会失败
很多现代后台不用 <table>,而是用:
- Bootstrap:
<div class="row">+<div class="col"> - Angular:
ngx-datatable、datatable-header-cell、datatable-body-cell - 通用:带
role="gridcell"的 div 布局
浏览器直接复制时,Excel 往往无法识别列边界,所有内容堆在一列。
ComTools 的识别策略
HTML 转 Excel 内置多种解析器:
| 布局类型 | 识别方式 |
|---|---|
| 标准 table | <tr> / <th> / <td> |
| Bootstrap | .row 为行,.col 为列 |
| ngx-datatable | datatable-header-cell、datatable-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、链接文本等,避免复制到排序图标。
导出后下一步
- 需要入库:导出
.xlsx→ Excel 转 SQL - 只需查询 ID:在预览区选中列 → 「复制选中为 WHERE IN」