Angular - SheetJS - 如何将HTML表格导出到Excel？

Question

我从这个“教程”中复制了代码： 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/

- alansiqueira27

Answer 1

混合使用Jquery和Angular并不推荐，您可以在Angular中使用ViewChild来访问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');

    }
    }

演示

- Vikas

---

我们是否可以通过代码为单元格添加样式？ - Abhi

@Abhi，我不知道这个伙计。我在同一个问题上发布了这个问题，但没有得到任何答案。 - Vikas

如何在单个工作表中为多个表执行相同操作？ - Aniket Patil

@Vikas，如何将图像包括在Excel中 - https://stackblitz.com/edit/angular-nw6hhy?file=app％2Fapp.component.html - Kumaresan Sd

Answer 2

document.getElementsByClassName('table'); 返回一个 NodeList，而 getElementById('data-table'); 返回单个节点。

如果你只想获取第一个带有 table 类的元素，可以这样做：

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

- user184994