Angular - SheetJS - How to export HTML Table to Excel?

Question

I copied the code from this "tutorial":

function doit(type, fn, dl) {
   var elt = document.getElementById('data-table');
   var wb = XLSX.utils.table_to_book(elt, {sheet:"Sheet JS"});
   return dl ?
    XLSX.write(wb, {bookType:type, bookSST:true, type: 'base64'}) :
    XLSX.writeFile(wb, fn || ('test.' + (type || 'xlsx')));
}

So I ended up creating this method in Angular:

exportTableToExcel() {
   var type = "xlsx"
   var elt = document.getElementsByClassName('table');
   var wb = XLSX.utils.table_to_book(elt, /*{sheet:"Sheet JS"}*/);
   return XLSX.writeFile(wb, undefined || ('test.' + (type || 'xlsx')));
}

Well, on the line of the table_to_book method, I receive this exception:

table.getElementsByTagName is not a function

I also tried this tutorial, which is similar, but it's for Angular 4, not 5.

http://vinhboy.com/blog/2017/06/13/how-to-use-sheetjs-xlsx-with-angular-4-typescript-in-the-browser/

Vikas · Accepted Answer · 2018-05-22 20:48:47Z

9

Mixing Jquery with Angular is not Recommened you can use ViewChild in Angular to Access DOM Element
you can access native DOM elements that have a template reference variable.
Example
HTML

    <div class="container">
        <table class="table" #table>
//....................

Component

import {Component,ViewChild, ElementRef} from '@angular/core';
     import * as XLSX from 'xlsx';
    export class AppComponent  {
  @ViewChild('table') table: ElementRef;

ExportToExcel()
    {
      const ws: XLSX.WorkSheet=XLSX.utils.table_to_sheet(this.table.nativeElement);
      const wb: XLSX.WorkBook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      /* save to file */
      XLSX.writeFile(wb, 'SheetJS.xlsx');

    }
    }

DEMO

edited May 22, 2018 at 20:48

answered May 22, 2018 at 20:23

Vikas

12.1k7 gold badges49 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Abhi Over a year ago

is there any way that we can add styles to cell from your code?

Vikas Over a year ago

@Abhi I ain't aware of it mate I posted this question on the same but did not get any answer

Aniket Patil Over a year ago

How to do the same for multiple table in single sheet ?

Kumaresan Sd Over a year ago

@Vikas, how to include images in excel - stackblitz.com/edit/…

user184994 · Accepted Answer · 2018-05-22 20:07:37Z

1

document.getElementsByClassName('table'); returns a NodeList, whereas getElementById('data-table'); returns a single node.

If you just want the first element with the table class, do:

var elt = document.getElementsByClassName('table')[0];

answered May 22, 2018 at 20:07

user184994

18.3k2 gold badges51 silver badges54 bronze badges

Collectives™ on Stack Overflow

Angular - SheetJS - How to export HTML Table to Excel?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related