web-dev-qa-db-ja.com

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/

angularsheetjs
4
alansiqueira27

JqueryをAngularと混合することはお勧めしませんViewChildin 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');

    }
    }

[〜＃〜]デモ[〜＃〜]

7
Vikas

document.getElementsByClassName('table');はNodeListを返しますが、getElementById('data-table');は単一のノードを返します。

tableクラスの最初の要素だけが必要な場合は、次のようにします。

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