Morioh
Login
Iñigo Martínez

Iñigo Martínez

10 months ago

Cómo exportar datos a un archivo de Excel en una aplicación Angular

En este tutorial, aprenderemos cómo exportar datos a archivos de hojas de Excel en aplicaciones Angular 14. Para exportar datos a un archivo Excel en la aplicación Angular seguimos los siguientes pasos

  • Paso 1: crear una nueva aplicación Angular
  • Paso 2: instale la biblioteca bootstrap y primeng
  • Paso 3: agregue código en el archivo App.Module.ts
  • Paso 4: Agregar código en Ver archivo
  • Paso 5: Agregar código en el archivo app.Component ts
  • Paso 6: inicie la aplicación Angular

Paso 1: crear una nueva aplicación angular

En primer lugar, abra su terminal y ejecute el siguiente comando para instalar la aplicación angular:

ng new my-new-app

Paso 2: instale la biblioteca bootstrap y primeng

Luego ejecute el siguiente comando en la terminal para instalar la biblioteca bootstrap y la biblioteca de exportación de Excel en la aplicación angular; como sigue:

npm install jquery --save
ng add @ng-bootstrap/ng-bootstrap
npm install primeng --save 
npm install primeicons --save  
npm install @angular/cdk --save 
npm i file-saver npm i xlsx 
npm install primeflex --save

Paso 3: agregue código en el archivo App.Module.ts

En este paso, visite el directorio src/app y abra el archivo app.module.ts . Y luego agregue las siguientes líneas al archivo app.module.ts:

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TableModule } from 'primeng/table';
import { DropdownModule } from 'primeng/dropdown';
import { ButtonModule } from 'primeng/button';
 
@NgModule({
 ...
  imports: [
   ...
    BrowserAnimationsModule,
    TableModule,
    DropdownModule,
    ButtonModule
  ],
  ...

Paso 4: Agregar código en Ver archivo

En este paso, cree una tabla html con el botón exportar excel en la aplicación angular. Entonces, visita src/app/ y app.component.html y actualiza el siguiente código:

<p-table [value]="sales">
    <ng-template pTemplate="caption">
        <div class="p-d-flex">
            
            <button type="button" pButton pRipple icon="pi pi-file-excel" (click)="exportExcel()" class="p-button-success p-mr-2"></button>
            
        </div>
    </ng-template>
    <ng-template pTemplate="header">
        <tr>
             
            <th pSortableColumn="brand">Brand <p-sortIcon field="brand"></p-sortIcon></th>
            <th>Last Year Sale</th>
            <th>This Year Sale</th>
            <th>Last Year Profit</th>
            <th>This Year Profit</th>
        </tr>
         
    </ng-template>
    <ng-template pTemplate="body" let-sale>
        <tr>
            <td>{{sale.brand}}</td>
            <td>{{sale.lastYearSale}}</td>
            <td>{{sale.thisYearSale}}</td>
            <td>{{sale.lastYearProfit}}</td>
            <td>{{sale.thisYearProfit}}</td>
        </tr>
    </ng-template>
</p-table>

Paso 5: Agregar código en el archivo app.Component ts

En este paso, visite el directorio src/app y abra app.component.ts . Luego agregue el siguiente código al archivo componente.ts:

...
export class AppComponent {
 ...
  ngOnInit() {
    this.sales = [
      { brand: 'Apple', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342' },
      { brand: 'Samsung', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122' },
      { brand: 'Microsoft', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500' },
      { brand: 'Philips', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323,' },
      { brand: 'Song', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332' },
      { brand: 'LG', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005' },
      { brand: 'Sharp', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214' },
      { brand: 'Panasonic', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322' },
      { brand: 'HTC', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232' },
      { brand: 'Toshiba', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533' }
  ];
   
}
 
//excel button click functionality
exportExcel() {
  import("xlsx").then(xlsx => {
      const worksheet = xlsx.utils.json_to_sheet(this.sales); // Sale Data
      const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
      const excelBuffer: any = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });
      this.saveAsExcelFile(excelBuffer, "sales");
  });
}
saveAsExcelFile(buffer: any, fileName: string): void {
  import("file-saver").then(FileSaver => {
    let EXCEL_TYPE =
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
    let EXCEL_EXTENSION = ".xlsx";
    const data: Blob = new Blob([buffer], {
      type: EXCEL_TYPE
    });
    FileSaver.saveAs(
      data,
      fileName + "_export_" + new Date().getTime() + EXCEL_EXTENSION
    );
  });
}
 
}

Paso 6: inicie la aplicación Angular

En este paso, ejecute el siguiente comando en la terminal para iniciar la aplicación angular:

ng serve

En este tutorial, aprendió cómo exportar datos a un archivo de Excel en una aplicación Angular.

2.00 GEEK