Angular 2+

ESM的构建可以直接从TS代码中导入,用。

import { read, utils, writeFileXLSX } from 'xlsx';

此演示使用数组数组(类型 Array<Array<any>> )作为核心状态。组件模板包括一个文件输入元素、一个随数据更新的表格和一个用于导出数据的按钮。

本演示中的其他脚本显示。

  • ionic iOS、android 和浏览器的ionic部署
  • nativescript 适用于 iOS 和 android 的nativescript部署

阵列的阵列

Array<Array<any>> 整齐地映射到带有 ngFor 的表:

<table class="sjs-table">
  <tr *ngFor="let row of data">
    <td *ngFor="let val of row">
      {{val}}
    </td>
  </tr>
</table>

aoa_to_sheet aoa_to_sheet 程序函数返回一个工作表。导出很简单:

/* 生成工作表 */
const ws: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(this.data);

/* 生成工作簿并添加工作表 */
const wb: XLSX.WorkBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

/* 保存到文件 */
XLSX.writeFile(wb, 'SheetJS.xlsx');

sheet_to_json 带有选项 header:1 的sheet_to_json使导入变得简单:

/* <input type="file" (change)="onFileChange($event)" multiple="false" /> */
/* ...(在组件类定义中)... */
  onFileChange(evt: any) {
    /* 连接文件阅读器 */
    const target: DataTransfer = <DataTransfer>(evt.target);
    if (target.files.length !== 1) throw new Error('Cannot use multiple files');
    const reader: FileReader = new FileReader();
    reader.onload = (e: any) => {
      /* 阅读工作簿 */
      const ab: ArrayBuffer = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(ab);

      /* 抓取第一张纸 */
      const wsname: string = wb.SheetNames[0];
      const ws: XLSX.WorkSheet = wb.Sheets[wsname];

      /* 保存数据 */
      this.data = <AOA>(XLSX.utils.sheet_to_json(ws, {header: 1}));
    };
    reader.readAsArrayBuffer(target.files[0]);
  }

在Angular版本之间进行切换

与 Angular 2 一起工作的模块在很大程度上与 Angular 4+ 一起工作。在版本之间切换主要是安装正确版本的核心和相关模块。该演示包含Angular 的每个主要版本(最多 12 个)的 package.json-angular# 文件。

要测试特定的 Angular 版本,请覆盖 package.json

# 切换到 Angular 2
$ cp package.json-ng2 package.json
$ npm install
$ ng serve

注意:运行演示时,Angular 2 需要 Node <= 14。这是由于 ng 的工具问题,不会影响浏览器的使用。

XLSX 符号链接

在这棵树中, node_modules/xlsx 是一个指向根的链接。这可以测试库的开发版本。为了在其他应用程序中使用此演示,请添加 xlsx 依赖项:

$ npm install --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz

SystemJS Configuration

默认的angular-cli配置不需要额外的配置。

一些部署使用 SystemJS 加载器,这确实需要配置。SheetJS CE 文档中的 SystemJS演示描述了所需的设置。

Ionic

复制整个项目有点棘手。包含的 ionic.sh 脚本执行必要的安装步骤。

Array<Array<any>> 整齐地映射到带有 ngFor 的表:

<ion-grid>
  <ion-row *ngFor="let row of data">
    <ion-col *ngFor="let val of row">
      {{val}}
    </ion-col>
  </ion-row>
</ion-grid>

@ionic-native/file 在设备上读写文件。 readAsArrayBuffer 返回适合 array 类型的 ArrayBuffer 对象, array 类型可以转换为可以用 writeFile 导出的 blob :

/* 阅读工作簿 */
const ab: ArrayBuffer = await this.file.readAsArrayBuffer(url, filename);
const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'array'});

/* 写一个工作簿 */
const wbout: ArrayBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
let blob = new Blob([wbout], {type: 'application/octet-stream'});
this.file.writeFile(url, filename, blob, {replace: true});

NativeScript

新的演示针对 NativeScript 8 进行了更新,并使用了更多惯用的数据模式。

Analytics