如何将 Excel 文件放入 ag-grid-angular

Question

我试图找到导入方法，但没有出来。 有人知道吗？ 请告诉我！

Answer 1

参考此链接：https://stackblitz.com/edit/angular-ag-grid-excel-import?file=src%2Fapp%2Fapp.component.ts

<ag-grid-angular 
    style="width: 500px; height: 550px;" 
    class="ag-theme-balham"
    [rowData]="rowData" 
    [gridOptions]="gridOptions"
    [modules]="modules"
    (gridReady)="onGridReady($event)">
</ag-grid-angular>
<input hidden type="file"
           id="file"
           #file
           (change)="importExcel($event)">
 <button (click)="file.click()">Import Excel</button>
 
 Ts:
  private gridApi: GridApi;
  private gridColumnApi: any;
  public modules: any;
  public gridOptions: GridOptions;
  public rowData: Array<any>;

  constructor() {
    const valuesMake = ['Ford', 'Toyota'];
    this.modules = AllCommunityModules;

    // https://www.ag-grid.com/javascript-grid-properties/
    this.gridOptions = {
      columnDefs: [
        new CheckboxColumn('', 'selection'),
        new DropdownColumn('Make', 'make', valuesMake, false, 'asc'),
        new TextColumn('Model', 'model'),
        new TextColumn('Price', 'price')
      ],
      rowSelection: 'multiple',
      rowMultiSelectWithClick: true,
      enableFilter: true,
      enableSorting: true,
      pagination: true
    }
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;   
    this.gridApi.sizeColumnsToFit(); 
  }

  convertDataToProducts(event: any) {
   
    const data = new Uint8Array(event.target.files);
    
    const workbook = XLSX.read(data, {type: 'array'});
    const sheet_name_list = workbook.SheetNames;
    console.log(XLSX.utils.sheet_to_json(workbook.Sheets[sheet_name_list[0]]))
    return sheet_name_list;
  }

  populateGrid(file: any) {
    
    var firstSheetName = file.SheetNames[0];
    var worksheet = file.Sheets[firstSheetName];
debugger
    var columns = {
        'A': '',
        'B': 'Make',
        'C': 'Model',
        'D': 'Price'
    };

    var rowData = [];
    var rowIndex = 2;
    while (worksheet['A' + rowIndex]) {
        var row = {};
        Object.keys(columns).forEach(function(column) {
            row[columns[column]] = worksheet[column + rowIndex].w;
        });

        rowData.push(row);

        rowIndex++;
    }

    console.log(rowData);
    this.gridOptions.api.setRowData(rowData);
}

  importExcel(event: any) {
    debugger
    if (event.target.files.length > 0) {
      const products = this.convertDataToProducts(event);
      console.log('arquivo', products);
      this.populateGrid(products);
    }
  }