如何从Mat Table中复制表格格式数据而非纯文本？

使用Angular Material的<mat-table>展示数据时，选中内容右键复制只能得到无格式纯文本，无法复制出可直接粘贴到Excel、Word的规整表格结构。

原因 #

默认<mat-table>渲染的DOM结构基于<div>而非原生<table>标签，浏览器无法识别为标准表格，复制时仅提取纯文本内容。

解决办法 #

办法1：改用原生<table>结构（推荐） #

Angular Material支持原生<table>的组件写法，替换后浏览器会自动识别为表格，复制时保留列结构。修改后的代码：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 序号列 -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> 序号 </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- 名称列 -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 名称 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

替换要点：

• 将<mat-table>改为<table mat-table>
• <mat-header-cell>替换为<th mat-header-cell>
• <mat-cell>替换为<td mat-cell>
• <mat-header-row>、<mat-row>分别替换为<tr mat-header-row>、<tr mat-row>

办法2：自定义复制事件逻辑 #

若不想修改表格结构，可通过监听复制事件，手动生成带格式的内容写入剪贴板，同时支持纯文本（适配Excel）和HTML格式（适配Word等富文本工具）。

1. 组件类中添加处理方法：

handleTableCopy(event: ClipboardEvent) {
  event.preventDefault();
  const tableData = this.dataSource.data;
  const columns = this.displayedColumns;

  // 生成制表符分隔的纯文本，粘贴到Excel自动识别为表格
  const plainText = [
    columns.join('\t'),
    ...tableData.map(row => columns.map(col => row[col]).join('\t'))
  ].join('\n');

  // 生成HTML表格格式，粘贴到Word等保留样式
  const htmlText = `
    <table>
      <thead><tr>${columns.map(col => `<th>${col}</th>`).join('')}</tr></thead>
      <tbody>${tableData.map(row => `<tr>${columns.map(col => `<td>${row[col]}</td>`).join('')}</tr>`).join('')}</tbody>
    </table>
  `;

  event.clipboardData?.setData('text/plain', plainText);
  event.clipboardData?.setData('text/html', htmlText);
}

2. 模板中绑定复制事件：

<mat-table [dataSource]="dataSource" class="mat-elevation-z8" (copy)="handleTableCopy($event)">
  <!-- 原有列定义保持不变 -->
</mat-table>

先修复原代码的错误 #

你的原代码存在两处问题，可能导致表格渲染异常：

1. 重复定义了position和name列
2. 最后一个<ng-container>标签未闭合（缺少>）
   修复后的代码：

<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 序号列 -->
  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> 序号 </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
  </ng-container>

  <!-- 名称列 -->
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> 名称 </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

内容的提问来源于stack exchange，提问作者krishna0001