Angular - SheetJS - 如何将 HTML Table 导出到 Excel?
Angular - SheetJS - How to export HTML Table to Excel?
我从这个"tutorial"复制了代码:
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 is not a function
我也试过这个教程,它很相似,但它是针对 Angular 4,而不是 5。
http://vinhboy.com/blog/2017/06/13/how-to-use-sheetjs-xlsx-with-angular-4-typescript-in-the-browser/
document.getElementsByClassName('table');
returns一个NodeList
,而getElementById('data-table');
returns一个节点。
如果您只想要带有 table
class 的第一个元素,请执行:
var elt = document.getElementsByClassName('table')[0];
不建议将 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');
}
}
我从这个"tutorial"复制了代码:
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 is not a function
我也试过这个教程,它很相似,但它是针对 Angular 4,而不是 5。
http://vinhboy.com/blog/2017/06/13/how-to-use-sheetjs-xlsx-with-angular-4-typescript-in-the-browser/
document.getElementsByClassName('table');
returns一个NodeList
,而getElementById('data-table');
returns一个节点。
如果您只想要带有 table
class 的第一个元素,请执行:
var elt = document.getElementsByClassName('table')[0];
不建议将 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');
}
}