Angular - SheetJS - Как экспортировать HTML-таблицу в Excel?

Я скопировал код из этого "учебника":

https://sheetjs.com/demos/table.html

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')));
}

В итоге я создал этот метод в 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')));
}

Что ж, в строке метода table_to_book я получаю это исключение:

table.getElementsByTagName не является функцией

Я также пробовал этот учебник, который похож, но он для Angular 4, а не 5.

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


angular sheetjs
person alansiqueira27    schedule 22.05.2018    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Смешивание Jquery с Angular не рекомендуется, вы можете использовать ViewChild в Angular для Доступ к элементу DOM
позволяет получить доступ к нативным элементам DOM, имеющим ссылочную переменную шаблона.
Пример
HTML

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

Составная часть

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');

    }
    }

ДЕМО

person Vikas    schedule 22.05.2018
comment
Есть ли способ добавить стили в ячейку из вашего кода? - person Abhi; 17.11.2018
comment
@Abhi Я не знаю об этом, приятель, я разместил это вопрос по тому же но не получил ответа - person Vikas; 17.11.2018
comment
Как сделать то же самое для нескольких таблиц на одном листе? - person Aniket Patil; 02.06.2021

arrow_upward
1
arrow_downward

document.getElementsByClassName('table'); возвращает NodeList, тогда как getElementById('data-table'); возвращает один узел.

Если вам просто нужен первый элемент с классом table, выполните:

var elt = document.getElementsByClassName('table')[0];
person user184994    schedule 22.05.2018