如何在现有Angular项目中导入Excel并解决依赖安装报错

一、解决ERESOLVE依赖冲突 #

错误根源是@nebular/theme@9.1.0-rc.8要求@angular/cdk版本必须为^13.0.0，但当前项目使用的是12.1.0，版本不匹配导致依赖解析失败。以下是两种可行解决方案：

方案1：忽略peer依赖强制安装exceljs #

适合不想改动现有依赖版本的场景，通过--legacy-peer-deps跳过版本检查：

npm install exceljs --legacy-peer-deps

方案2：升级@angular/cdk到兼容版本 #

ngx-admin 9.x本身基于Angular 13，升级cdk到对应版本可从根源解决冲突：

npm install @angular/cdk@^13.0.0 --save
# 升级完成后再安装exceljs
npm install exceljs --save

二、实现Excel导入与表格展示 #

以exceljs为例，完成本地Excel文件导入并在ngx-admin中展示：

1. 编写上传组件模板 #

新建excel-upload.component.html，添加文件输入框和ngx-admin表格组件：

<input type="file" accept=".xlsx,.xls" (change)="onFileChange($event)">
<nb-table [data]="excelData" *ngIf="excelData.length > 0">
  <nb-column *ngFor="let col of columns" [field]="col" [header]="col"></nb-column>
</nb-table>

2. 实现文件解析逻辑 #

在excel-upload.component.ts中编写读取、解析Excel的代码：

import { Component } from '@angular/core';
import * as ExcelJS from 'exceljs';

@Component({
  selector: 'app-excel-upload',
  templateUrl: './excel-upload.component.html',
  styleUrls: ['./excel-upload.component.scss']
})
export class ExcelUploadComponent {
  excelData: any[] = [];
  columns: string[] = [];

  async onFileChange(event: Event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (!file) return;

    const workbook = new ExcelJS.Workbook();
    await workbook.xlsx.load(await file.arrayBuffer());
    
    // 读取第一个工作表
    const worksheet = workbook.worksheets[0];
    
    // 提取表头（第一行）
    this.columns = worksheet.getRow(1).values.filter(val => val !== null) as string[];
    
    // 提取数据行（从第二行开始）
    this.excelData = [];
    worksheet.eachRow({ includeEmpty: false }, (row, rowNum) => {
      if (rowNum > 1) {
        const rowObj: any = {};
        row.values.forEach((val, idx) => {
          if (idx > 0 && this.columns[idx-1]) {
            rowObj[this.columns[idx-1]] = val;
          }
        });
        this.excelData.push(rowObj);
      }
    });
  }
}

3. 注册并使用组件 #

将组件添加到对应模块的declarations数组，然后在需要的页面中引入：

<app-excel-upload></app-excel-upload>

注意：确保模块中已导入NbTableModule以使用ngx-admin的表格组件。

内容的提问来源于stack exchange，提问作者Sruthi Sivaraman