Angular 7:从Excel中读取数据并插入现有表格中
创始人
2024-10-17 08:30:23
0

下面是一个使用Angular 7从Excel中读取数据并插入现有表格中的解决方案的代码示例:

  1. 安装xlsx和file-saver库:
npm install xlsx file-saver --save
  1. 创建一个名为excel.service.ts的服务文件,并在其中添加以下代码:
import { Injectable } from '@angular/core';
import * as XLSX from 'xlsx';

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

  constructor() { }

  public importExcel(file: File): Promise {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();

      fileReader.onload = (e: any) => {
        const arrayBuffer: any = e.target.result;
        const data = new Uint8Array(arrayBuffer);
        const arr = new Array();

        for (let i = 0; i !== data.length; ++i) {
          arr[i] = String.fromCharCode(data[i]);
        }

        const workbook = XLSX.read(arr.join(''), { type: 'binary' });
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { raw: false });

        resolve(jsonData);
      };

      fileReader.readAsArrayBuffer(file);
    });
  }
}
  1. 在你想要读取Excel并插入表格的组件中,导入并使用excel.service.ts:
import { Component } from '@angular/core';
import { ExcelService } from './excel.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  data: any[];

  constructor(private excelService: ExcelService) { }

  onFileChange(evt: any) {
    const target: 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 contents: string = e.target.result;
      this.excelService.importExcel(target.files[0])
        .then(data => {
          this.data = data;
        });
    };
    reader.readAsText(target.files[0]);
  }
}
  1. 在你的HTML模板中添加一个文件输入元素,并绑定onFileChange方法:

Name Age
{{item.name}} {{item.age}}

这样,当你选择一个Excel文件后,它将被读取并将数据插入到表格中。请确保Excel文件的第一个工作表中包含名称为"name"和"age"的列。

相关内容

热门资讯

透视资料!哈糖大菠萝开挂(透视... 透视资料!哈糖大菠萝开挂(透视)哈糖大菠萝免费辅助器(辅助)其实是真的有教程(哔哩哔哩)暗藏猫腻,小...
透视方针!德州辅助工具到底怎么... 透视方针!德州辅助工具到底怎么样(透视)pokemmo辅助脚本(辅助)原来真的是有工具(哔哩哔哩)1...
透视讲义!pokemmo手机版... 透视讲义!pokemmo手机版修改器(透视)红龙poker辅助工具(辅助)本来有方法(哔哩哔哩)1、...
透视步骤!pokermaste... 透视步骤!pokermaster脚本(透视)拱趴大菠萝万能挂(辅助)好像一直都是有技巧(哔哩哔哩)1...
透视指南书!aa poker辅... 透视指南书!aa poker辅助包(透视)epoker底牌透视(辅助)竟然是真的有工具(哔哩哔哩)1...
透视绝活儿!werplan透视... 透视绝活儿!werplan透视挂(透视)impoker辅助(辅助)确实是真的有脚本(哔哩哔哩)1、每...
透视阶段!聚星ai辅助工具下载... 透视阶段!聚星ai辅助工具下载(透视)智星德州辅助译码插件靠谱吗(辅助)真是一直都是有攻略(哔哩哔哩...
透视模板!来玩app破解版(透... 透视模板!来玩app破解版(透视)pokerworld破解版下载(辅助)原来一直总是有app(哔哩哔...
透视窍要!pokermaste... 透视窍要!pokermaster辅助器(透视)哈糖大菠萝能开挂吗(辅助)都是一直总是有app(哔哩哔...
透视指南!pokermaste... 您好,德州私人局怎么透视这款游戏可以开挂的,确实是有挂的,需要了解加去威信【136704302】很多...