Excel 操作
IMPORT MODULE

一个基于 SheetJS 的Excel文件操作,它是目前在浏览器中包含最全的Excel操作的脚本库。

注:你也可以使用 js-xlsx 是另一个 Fork sheetjs 的类库,它提供包括:图片、样式等额外选项。最后你利用 callback 选项重要渲染你的 excel。

依赖

由于 sheetjs 脚本大小以及对 Excel 的操作并不是刚需的原因,因此采用一种延迟加载脚本的形式,可以通过全局配置配置来改变默认 CDN 路径,默认情况下使用 https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js

使用本地路径

// angular.json
{
  "glob": "**/{xlsx.full.min,cpexcel}.js",
  "input": "./node_modules/xlsx/dist",
  "output": "assets/xlsx/"
}
// global-config.module.ts
const alainConfig: AlainConfig = {
  xlsx: {
    url: '/assets/xlsx/xlsx.full.min.js',
    modules: [`/assets/xlsx/cpexcel.js`]
  }
};

代码演示

result:

导入

导入Excel并输出JSON,支持 File、URL 格式。

expand code expand code
import { JsonPipe } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';

import { XlsxService } from '@delon/abc/xlsx';
import { NzButtonModule } from 'ng-zorro-antd/button';
import type { NzSafeAny } from 'ng-zorro-antd/core/types';

@Component({
  selector: 'components-xlsx-import',
  template: `
    <button nz-button (click)="url()">Via Url</button>
    <input type="file" (change)="change($event)" multiple="false" class="ml-sm" />
    <p class="mt-sm">result: {{ data | json }}</p>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [NzButtonModule, JsonPipe]
})
export class ComponentsXlsxImportComponent {
  data: NzSafeAny;

  constructor(
    private xlsx: XlsxService,
    private cdr: ChangeDetectorRef
  ) {}

  url(): void {
    this.xlsx.import(`./assets/demo.xlsx`).then(res => {
      this.data = res;
      this.cdr.detectChanges();
    });
  }

  change(e: Event): void {
    const node = e.target as HTMLInputElement;
    this.xlsx.import(node.files![0]).then(res => {
      this.data = res;
      this.cdr.detectChanges();
    });
    node.value = '';
  }
}
姓名年龄
编号姓名name 1年龄29
编号姓名name 2年龄27
编号姓名name 3年龄22
导出

导出Excel并自动弹出保存对话框。

expand code expand code
import { Component, inject } from '@angular/core';

import { STColumn, STData, STModule } from '@delon/abc/st';
import { XlsxService } from '@delon/abc/xlsx';
import { NzButtonModule } from 'ng-zorro-antd/button';

@Component({
  selector: 'components-xlsx-export',
  template: `
    <button nz-button (click)="download('xlsx')">Export Xlsx</button>
    <button nz-button (click)="download('csv')">Export Csv</button>
    <st [data]="users" [ps]="3" [columns]="columns" class="mt-sm" />
  `,
  standalone: true,
  imports: [NzButtonModule, STModule]
})
export class ComponentsXlsxExportComponent {
  private readonly xlsx = inject(XlsxService);

  users: STData[] = Array(100)
    .fill({})
    .map((_, idx) => ({
      id: idx + 1,
      name: `name ${idx + 1}`,
      age: Math.ceil(Math.random() * 10) + 20
    }));
  columns: STColumn[] = [
    { title: '编号', index: 'id', type: 'checkbox' },
    { title: '姓名', index: 'name' },
    { title: '年龄', index: 'age' }
  ];

  download(format: 'xlsx' | 'csv'): void {
    const data = [this.columns.map(i => i.title)];
    this.users.forEach(i => data.push(this.columns.map(c => i[c.index as string])));
    this.xlsx.export({
      sheets: [
        {
          data,
          name: 'sheet name'
        }
      ],
      format
    });
  }
}

API

LazyService

成员说明类型默认值
import(fileOrUrl: File | string)导入Excel,返回 JSONPromise<{ [key: string]: any[][] }>-
export(options: XlsxExportOptions)导出ExcelPromise<void>-
numberToSchema(val: number)数值转符号名string-

XlsxExportOptions

成员说明类型默认值
[sheets]数据源{ [sheet: string]: WorkSheet } | XlsxExportSheet[]-
[filename]Excel文件名stringexport.xlsx
[opts]Excel写入选项,见 WritingOptionsWritingOptions-
[callback]保存前触发(wb: WorkBook) => void-

xlsx

xlsx 指令。

<div [xlsx]="XlsxExportOptions">导出</div>
Loading...