Angular 使用 xlsx 插件封装一个读取 excel 服务

2023-12-24 10:27:46

安装 xlsx 插件

首先，我们需要在 Angular 项目中安装 xlsx 插件。可以在终端中运行以下命令：

npm install xlsx --save

安装完成后，我们就可以在 Angular 项目中使用 xlsx 插件了。

2. 封装服务 excel.service.ts

接下来，我们需要封装一个服务来处理 excel 文件的读取和解析。可以在 src/app 目录下创建一个名为 excel.service.ts 的文件，并添加以下代码：

import { Injectable } from '@angular/core';
import * as XLSX from 'xlsx';

@Injectable({
  providedIn: 'root'
})
export class ExcelService {

  constructor() { }

  // 读取 excel 文件
  readExcel(file: File) {
    // 使用 XLSX.read 读取 excel 文件
    const reader = new FileReader();
    reader.onload = (e: any) => {
      // 使用 XLSX.parse 解析 excel 文件
      const data = XLSX.parse(e.target.result, { type: 'binary' });
      // 返回 excel 数据
      return data;
    };
    reader.readAsBinaryString(file);
  }
}

3. 使用

最后，我们就可以在 Angular 组件中使用 excel 服务来读取 excel 文件了。可以在组件中注入 ExcelService，并调用 readExcel 方法来读取 excel 文件。

import { Component, OnInit } from '@angular/core';
import { ExcelService } from '../excel.service';

@Component({
  selector: 'app-excel-reader',
  templateUrl: './excel-reader.component.html',
  styleUrls: ['./excel-reader.component.css']
})
export class ExcelReaderComponent implements OnInit {

  constructor(private excelService: ExcelService) { }

  ngOnInit(): void {
    // 读取 excel 文件
    this.excelService.readExcel(file).then((data: any) => {
      // 处理 excel 数据
      console.log(data);
    });
  }
}