Export to Excel on Angular 4

前端 未结 5 1854
春和景丽
春和景丽 2021-02-13 05:55

I have a data table that is dynamically populated using Angular 4. I would like to export the table to excel. How can I achieve this in Angular 4. I\'m looking for .xls and not

相关标签:
5条回答
  • 2021-02-13 05:56

    before install libary

    npm i file-saver
    npm i xlsx
    

    Create service excel with name class ExcelService ng g s excel/ExcelService you can coppy below 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 ExcelServiceService {
      constructor() { }
      public exportAsExcelFile(json: any[], excelFileName: string): void {
    
        const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
        console.log('worksheet',worksheet);
        const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
        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);
      }
    }
    

    Create folder model in have class CountryInfo

    export class CountryInfo {
        country: string;
        hydro: number;
        oil: number;
        gas: number;
        coal: number;
        nuclear: number;
    }
    

    you can clone example export a file excel in angular at github

    0 讨论(0)
  • 2021-02-13 05:57

    You can use XLSX for export to excel.

    It will support json or array into excel.

    Sample code

    import * as XLSX from 'xlsx';
    
    public exportAsExcelFile(json: any[], excelFileName: string): void {
      const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
      const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
      const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
      this.saveAsExcelFile(excelBuffer, excelFileName);
    }
    

    For Save

    private saveAsExcelFile(buffer: any, fileName: string): void {
      const data: Blob = new Blob([buffer], {
        type: EXCEL_TYPE
      });
      const today = new Date();
      const date = today.getFullYear() + '' + (today.getMonth() + 1) + '' + today.getDate() + '_';
      const time = today.getHours() + "-" + today.getMinutes() + "-" + today.getSeconds();
      const name = fileName + date + time;
      FileSaver.saveAs(data, name + EXCEL_EXTENSION);
    }
    

    Reference for Angular 2+

    Xlsx for angular 2+

    0 讨论(0)
  • 2021-02-13 06:02

    For those who are still looking for a working answer.

    public export() {
        const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.myDataModels);
        /* generate workbook and add the worksheet */
        const wb: XLSX.WorkBook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, worksheet, 'Sheet1');
        /* save to file */
        XLSX.writeFile(wb, this.createFileName());
    }
    

    This will save as an xlsx file automatically Got this from https://github.com/SheetJS/js-xlsx/tree/19620da30be2a7d7b9801938a0b9b1fd3c4c4b00/demos/angular2

    0 讨论(0)
  • 2021-02-13 06:06

    It seems that microsoft provide a Javascript plugin, usable with Angular, here

    0 讨论(0)
  • 2021-02-13 06:08

    You can only use xlsx library to write and save excel file at the same time using XLSX.writeFile()

    exportExcel(data: any[]){
       const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(data);
       const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
       XLSX.writeFile(workbook, 'my_file.xls', { bookType: 'xls', type: 'buffer' });
    }
    
    0 讨论(0)
提交回复
热议问题