export-excelcp ·

Installing

Angular version 17.x.x

npm install export-excelcp

:warning: Important

In the project ** tsconfig.app.json **, it should be added as a node type, so that the compilation does not generate an error.

"types": ["node"]

array example

let pokemonList: IReport[] = [];

this.pokemonList = [
  {
    name: "Pikachu",
    url: "https://pokeapi.co/api/v2/pokemon/25/",
    fecha: new Date(),
    cantidad: 10000,
    valor: 1000,
  },
];

propertyMapping

// contains the names of the properties that you want to modify
 propertyMapping: { [key: string]: string } = {
    Name: 'Nombre',
    Url: 'URL_Poke',
    Date: 'Fecha_Ini',
    Quantity: 'Cantidad',
    Value: 'Valor',
  };

:gear: Configuration of the reportConfig file

let reportConfig!: ReportConfig;

this.reportConfig = {
  dataList: this.pokemonList,
  includeId: true, // Whether to include the ID in the report
  excludeKeys: [], // Fields to exclude from the report ['value']
  dateFormat: "yyyy-MM-dd",
  includeLogo: true, // Flag to include the logo
  logoPath: "assets/img/logos/angular.png",

  //** Colors applied to the headers */
  bgColors: {
    bgHeader: "84b6f4",
    bgSumRow: "fdfd96",
    bgFont: "FFFFFFFF",
  },

  // Fields to customize in the report, {} to not customize
  currencyFields: {
    value: {
      //*** Exclusive formats for the data ***/
      formatAsCurrency: true,
      showDollarSign: true,
      useThousandSeparator: false,
      //*** ***************************** ***/
      showSum: true, // Whether to show a sum or not
      sumFormatAsCurrency: true, // Whether to show the sum as currency or not
    },
    quantity: {
      formatAsCurrency: false,
      showDollarSign: false,
      useThousandSeparator: false,
      showSum: false,
      sumFormatAsCurrency: false,
    },
  },
  // Modification of property names, propertyMapping {} to not modify
  propertyMapping: this.propertyMapping,
};

:wrench: Configuration in the component

import { ExportExcelModule, IReport, ReportConfig } from 'export-excelcp';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ExportExcelModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})

:wrench: Configuration in the html

<export-xlsx
  class="btn-container"
[reportConfig]="reportConfig" // configuration of the report to export
[reportName]="'reportPokemon'" // name you want to give to the report
[iconClass]="'fas fa-file-excel'" // fontawesome or bootstrap icon ('bi bi-0-circle'), '' if you don't want to display the icon
[buttonText]="'excel'" // empty ('') if you only want to display the icon
>
</export-xlsx>


**scss global style**

.btn-container {
  display: flex;
  justify-content: end;
  margin: 0 auto 15px;

  button {
    cursor: pointer;
    color: #217346;
    background-color: transparent;
    border: none;
    font-size: 15px;
    height: 36px;
    width: 150px;

    &:hover {
      color: #000000;
    }
  }

  .excel-color {
    color: #217346; /* icon Color */
    cursor: pointer;
  }

Dependents

This library depends on exceljs

Demo

:star::star: stackblitz demo :star::star: