代码之家 › 专栏 › 技术社区 › alansiqueira27

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

sheetjs angular

alansiqueira27 · 技术社区 · 6 年前

我从这个“教程”中复制了代码:

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

所以我最终在角度上创建了这个方法:

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不是函数

我也尝试过这个教程,类似的,但它是针对角4,而不是5。

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

2 回复 | 直到 6 年前

Vikas RyanSand20 6 年前

不建议将jquery与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');

    }
    }

DEMO

user184994 6 年前

document.getElementsByClassName('table'); 返回 NodeList ,鉴于 getElementById('data-table'); 返回单个节点。

如果只需要第一个元素 table 类,do:

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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前