how to export excel data with angular typescript

Question

in my project i have table with information (FirstName, LastName, Age, Date), so i create a function making me to export this data format excel. but in my case i don't want TO EXPORT all the information of the table, i want just ( LastName, Age).

this is my code :

client.html :

<div class="panel-body table-responsive">
    <table id="excel-table" class="table">
        <thead>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Age</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor='let client of clients'>
                <td>{{client.FirstName}}</td>
                <td>{{client.LastName}}</td>
                <td>{{client.Age}}</td>
                <td>{{client.Date}}</td>
                <td>
                    <button class="btn btn-sm btn-danger" (click)="exportexcel()">ExportExcel</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

client.ts :

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {


  constructor() { }

  fileName = 'ExcelFile.xlsx';

  exportexcel(): void {
    let element = document.getElementById('excel-table');
    const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(element);
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.writeFile(wb, this.fileName);
  }

Does this answer your question? https://stackoverflow.com/a/59979908/2358409 — uminder, Apr 18 '22 at 13:20
you cannot use nodeJs libraries in angular... `XLSX` is a nodeJs library — The Fabio, Apr 18 '22 at 14:05
Does this answer your question? [ANGULAR 5 : how to export data to csv file](https://stackoverflow.com/questions/51487689/angular-5-how-to-export-data-to-csv-file) — The Fabio, Apr 18 '22 at 14:07

score 0 · Answer 1 · answered Apr 18 '22 at 15:05

Instead of storing the HTML table to Excel, you can transform the clients array to what you want to export (for example with Array.map()). Then you transform that data to a XLSX.Worksheet using XLSX.utils.json_to_sheet().

const data = this.clients.map(c => ({ 'LastName': c.LastName, 'Age': c.Age }));
const ws = XLSX.utils.json_to_sheet(data);
...

how to export excel data with angular typescript

1 Answers1