Скопируйте содержимое таблицы материалов в буфер обмена

Question

Я использую Angular 9 и использую таблицу материалов. Я хочу иметь кнопку, которая может копировать содержимое таблицы в ClipBoard. Я пробовал использовать [cdkCopyToClipboard] и привязать его к dataSource, но когда я копирую, я получаю [object Object]. Может ли кто-нибудь помочь мне здесь?

app.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';

export interface UserData {
  id: string;
  name: string;
  progress: string;
  color: string;
}

/** Constants used to fill up our data base. */
const COLORS: string[] = [
  'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', 'fuchsia', 'lime', 'teal',
  'aqua', 'blue', 'navy', 'black', 'gray'
];
const NAMES: string[] = [
  'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', 'Charlotte', 'Theodore', 'Isla', 'Oliver',
  'Isabella', 'Jasper', 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'
];

/**
 * @title Data table with sorting, pagination, and filtering.
 */
@Component({
  selector: 'table-overview-example',
  styleUrls: ['table-overview-example.css'],
  templateUrl: 'table-overview-example.html',
})
export class TableOverviewExample implements OnInit {
  displayedColumns: string[] = ['name'];
  dataSource: MatTableDataSource<UserData>;

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;

  constructor() {
    // Create 100 users
    const users = Array.from({length: 100}, (_, k) => createNewUser(k + 1));

    // Assign the data to the data source for the table to render
    this.dataSource = new MatTableDataSource(users);
  }

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

/** Builds and returns a new User. */
function createNewUser(id: number): UserData {
  const name = NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
      NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';

  return {
    id: id.toString(),
    name: name,
    progress: Math.round(Math.random() * 100).toString(),
    color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
  };
}

app.component.html

<mat-form-field>
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia">
</mat-form-field>

<div class="mat-elevation-z8">
      <button [cdkCopyToClipboard]="dataSource">Click to Copy</button>

  <table mat-table [dataSource]="dataSource" matSort>
    

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
      <td mat-cell *matCellDef="let row"> {{row.name}} </td>
    </ng-container>


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

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

Как вы можете видеть в файле html, который позволяет вам скопируйте контент, но почему-то он не работает с MatTableDataSource. Заранее спасибо.

Answer 1

Вам нужно изменить объект на JSON.

1-й метод:

Добавьте следующее к app.component.ts в constructor()

const copiedData = JSON.stringify(this.datasource.data);

и измените это :

 <button [cdkCopyToClipboard]="dataSource">Click to Copy</button>

к этому:

 <button [cdkCopyToClipboard]="copiedData">Click to Copy</button>

2-й метод:

Создайте новую функцию в app.component.ts

 copyData() {
    return JSON.stringify(this.dataSource.data);
  }

и используйте :

 <button [cdkCopyToClipboard]="copyData()">Click to Copy</button>

Если вы хотите, чтобы скопированные данные были просто значениями объекта.

В этом примере я предполагаю, что ваша таблица будет иметь более одного столбца.

Вот простой пример:

  copyData() {
    let data = "";
    this.dataSource.data.forEach(row => {
      data += this.ObjectToArray(row)
    })
    return data;
  }

  ObjectToString(obj: Object): string {
    // If you are using ES8 you can use const result = Object.values(obj);
    // else use the code give below
    let result = Object.keys(obj).map((key: keyof typeof obj) => {
      let value = obj[key];
      return value;
    });

    // then return the result as string along with a new line
    result.toString() + "\n";
  }

Здесь - рабочий пример в stackblitz.