How to implement export excel file functionality in angular 5 using spread js

Posted by: ankitabagul18 on 4 June 2018, 5:33 pm EST

    • Post Options:
    • Link

    Posted 4 June 2018, 5:33 pm EST

    Hi,

    we are using licensed version of spreadjs which are mentioned below.

    /SpreadJS/gc.spread.sheets.angular.11.0.5.js

    /SpreadJS/gc.spread.sheets.all.11.0.5.min.js

    how to import and export excel file in angular5 using spread js.?

  • Posted 5 June 2018, 7:38 pm EST

    Hello Ankita,

    Please have a look at attached sample for the same.

    Hope it helps.

    Thanks,

    Reeva

    spread-sheets-excelio-angular.zip

  • Posted 13 June 2018, 10:48 pm EST

    Hi Rreeva,

    I am getting incorrect file format error when i click on export file button.

    below is my spread-js-demo.component.ts file

    import { Component, OnInit } from ‘@angular/core’;

    import { HttpClient } from ‘@angular/common/http’;

    import {DummyUser } from ‘./dummy’;

    import { AppSettings } from ‘…/…/services/constant’;

    @Component({

    selector: ‘app-spread-js-demo’,

    templateUrl: ‘./spread-js-demo.component.html’,

    styleUrls: [‘./spread-js-demo.component.css’]

    })

    export class SpreadJsDemoComponent implements OnInit {

    spread : any;

    sheet :any;

    dummyUser :DummyUser=;

    rowCount:number;

    selectedRanges:any;

    sortInfo:any;

    excelIO:any;

    fileName:string;

    constructor(private http:HttpClient) { }

    ngOnInit() {

    this.spread=new GC.Spread.Sheets.Workbook(document.getElementById("spread-demo"),{sheetCount:1}); 
    this.sheet=this.spread.getActiveSheet();
    this.sheet.setValue(0, 0, "ANKITA", GC.Spread.Sheets.SheetArea.viewport);
    
    this.getSpreadData().subscribe((user:DummyUser[]) =>{
    
      this.dummyUser=user;
    
    });
    

    }

    getSpreadData()

    {

    return this.http.get<DummyUser>(AppSettings.API_URL+“get-spread-data”);

    }

    getdata()

    {

    this.sheet.setDataSource(this.dummyUser);

    }

    calculateSum()

    {

    this.sheet.addColumns(this.sheet.getColumnCount(), 1);

    this.sheet.getRange(-1, 4, -1, 1).backColor(“LightCyan”);

    this.rowCount=this.sheet.getRowCount();
    this.sheet.setValue(0, 4, "Subtotal", GC.Spread.Sheets.SheetArea.colHeader);    
    
    for(var i = 1; i <= this.rowCount; i++){
      this.sheet.setFormula(i-1, 4, "SUBTOTAL(9, C"+i+":D"+i);
    

    }

    }

    getCount()

    {

    this.selectedRanges = this.sheet.getSelections();
    console.log(this.selectedRanges);
    
    for(var i = 0; i < this.selectedRanges.length; i++){
    
      console.log("---------------------------------------------");
      console.log("Using Range class");
      console.log("---------------------------------------------");
      console.log("Selected top row index: " + this.selectedRanges[i].row);
      console.log("Number of selected rows: " + this.selectedRanges[i].rowCount);
      console.log("Selected first column index: " + this.selectedRanges[i].col);
      console.log("Number of selected columns: " + this.selectedRanges[i].colCount);
    

    }

    }

    sortColumn()

    {

     this.sortInfo = [
      {index:0, ascending:false}];
    
      this.sheet.sortRange(-1, 0,-1,4 , true, this.sortInfo);
    

    }

    filter()

    {

    this.sheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(-1, 2, -1, 1)));
    

    }

    ExportFile() {

    this.excelIO = new GC.Spread.Excel.IO();
    
    
    var serializationOption = {
      ignoreFormula: false,
      ignoreStyle: false,
      rowHeadersAsFrozenColumns: true,
      columnHeadersAsFrozenRows: true,
      includeBindingSource: true
    

    };

    this.fileName = 'Test';
    if (this.fileName.substr(-5, 5) !== '.xlsx') {
      this.fileName += '.xlsx';
    }
    var json = JSON.stringify(this.spread.toJSON(serializationOption));
    console.log(json);
    

    console.log(this.excelIO);

    this.excelIO.save(json, function (blob) {
       
    this.excelIO.saveAs(blob, this.fileName);
     console.log("inside save!!");
    
    }, function (e) {
        if (e.errorCode === 1) {
            alert(e.errorMessage);
            console.log(e);
        }
    });
    

    }

    }

    index.html

    --------------------------------------------------------------spread-js-demo.component.html--------------------

  • Posted 14 June 2018, 8:56 pm EST

    Hello,

    In your code, you are using saveAs() function:-

    this.excelIO.saveAs(blob, this.fileName);

    But, we don’t have saveAs function, hence please use fileSaver instead.

    Hope it helps.

    Thanks,

    Reeva

  • Posted 10 October 2018, 7:51 pm EST

    Can you please tell me how to add licence in SpreadJS angular-5 application?

  • Posted 15 October 2018, 1:53 am EST

    Hello,

    You need to include the license string to your ‘…component.ts’ file before creating an instance of SpreadJS as shown below:

    constructor() {
        // tslint:disable-next-line:max-line-length
      GC.Spread.Sheets.LicenseKey = 'x.x.x.x.x.x.x.x.x.x.x.x.x.x.x';
      this.spread =  new GC.Spread.Sheets.Workbook();
      this.excelIO = new Excel.IO();
      }
    

    Thanks,

    Deepak Sharma

  • Posted 15 May 2019, 2:11 am EST

    Welcome to the GrapeCity forum! The post below has been answered, and has also been made into a full tutorial. See below for the forum discussion, or visit this blog post on how to Import/Export Excel Spreadsheets in Angular:

    https://www.grapecity.com/blogs/how-to-import-and-export-excel-spreadsheets-in-angular

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels