Creation of XLS from Angular TypeScript [closed]

Question

Creation of XLS from Angular TypeScript [closed]

Navigation

#1 by (0 votes)

0

Good morning,

I need to export a table with an angular TypeScript Html to an xls format file.

The structure of the table is as follows.

<!-- Inicio de contenido de la tabla -->
           <table class="table table-hover table-striped  table-sm table-bordered">
              <thead>
                <tr  class="thead-dark">
                    <th>Id</th>
                    <th>Nombre 1</th>
                    <th>Nombre 2</th>
                    <th>Apellido 1</th>
                    <th>Apellido 2</th>
                    <th>Documento</th>
                    <th>Celular</th>
                    <th>Correo</th>
                    <th>Asesor Comercial</th>
                    <th>Ciudad</th>
                    <th>Fecha Creación</th>
                    <th>Estado</th>
                    <th>Ultima Modificacion</th>
                    <th>Nota</th>
                </tr>
              </thead>
               <tbody>
                <tr *ngFor="let op of oportunidades">

                    <td>{{op.id}}</td>
                    <td>{{op.nomUno}}</td>
                    <td>{{op.nomDos}}</td>
                    <td>{{op.apeUno}}</td>
                    <td>{{op.apeDos}}</td>
                    <td>{{op.documento}}</td>
                    <td>{{op.celular}}</td>
                    <td>{{op.emailUno}}</td>
                    <td>{{op.claveAsesor}}</td>
                    <td>{{op.municipio}}</td>
                    <td>{{op.fechaCreacion}}</td>
                    <td>{{op.estado}}</td>
                    <td>{{op.ultimaModificacion}}</td>
                  <td>
                      <div class="btn-group float-right" role="group" aria-label="Basic example">
                          <p-button label="Notas" icon="fa fa-check" iconPos="left" (click)="verNota(template,op.id)"></p-button>
                      </div>
                  </td>
                </tr>
              </tbody>
            </table>

Thanks

html typescript angular simplexlsx

asked by Jorge Reinaldo Linares Pineda 18.12.2018 в 17:27

source

1 answer

Help with trigger insert Search between dates (range) JDateChoser java access

score 0 · Accepted Answer

After trying I was able to solve my problem with the following line of code,

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
const EXCEL_TYPE = 'application/vnd.openxmlformats- 
officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';

@Injectable({
   providedIn: 'root'
})
export class ExcelService {
  constructor() { }
public exportAsExcelFile(json: any[], excelFileName: string): void {
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
    const workbook: XLSX.WorkBook = { Sheets: { 'homologacion': worksheet }, 
SheetNames: ['homologacion'] };
    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' 
});
    this.saveAsExcelFile(excelBuffer, excelFileName);
}
private saveAsExcelFile(buffer: any, fileName: string): void {
    const data: Blob = new Blob([buffer], { type: EXCEL_TYPE });
    FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + 
EXCEL_EXTENSION);
  }
}

This file receives an object of any type and creates the xls file to download