Angular 7 读取excel文件的第一列并将其保存到数组中

Question

我正在尝试上传一个 excel 文件，其中第一列是 ID 列。

我需要把所有的ID都取出来，存成一个数组，以后用来做数据管理。

我正在使用 XLSX 库：

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

而对于 html：

<input type="file" value="Upload Excel/CSV file" (change)="upload($event)" accept=".xlsx, .xls, .csv"/>

<button mat-fab color="warn" (click)="read()"><mat-icon color="warn">attach_file</mat-icon>Read Data</button>

我开始于：

read()
{
    const file = new FileReader();
}

但是我无法让文件 reader 读取上传的文件。

编辑

我尝试使用文件输入的更改事件：

upload(e)
  {
    let input = e.target;
    for (var index = 0; index < input.files.length; index++) {
        let reader = new FileReader();
        reader.onload = () => {
            // this 'text' is the content of the file
            var text = reader.result;
            console.log(reader.result)
        }

        reader.readAsText(input.files[index]);
    };
  }

但是读出来的结果好像加密了一样

Answer 1

此答案适用于 .csv 文件：

<input id="file" type="file" accept=".csv" (change)="fileUpload($event.target.files)">

fileUpload(files) {
    if (files && files.length > 0) {
        const file: File = files.item(0);
        const reader: FileReader = new FileReader();
        reader.readAsText(file);
        reader.onload = (e) => {
            const res = reader.result as string; // This variable contains your file as text
            const lines = res.split('\n'); // Splits you file into lines
            const ids = [];
            lines.forEach((line) => {
                ids.push(line.split(',')[0]); // Get first item of line
            });
            console.log(ids);
        };
    }
}

Answer 2

您或许应该让图书馆决定如何阅读工作簿，而不是像阅读文本一样阅读它。

我目前无法对此进行测试，但它可能看起来像这样，使用数组缓冲区：

var reader = new FileReader();
reader.onload = function(e) {
    var data = new Uint8Array(e.target.result);
    var workbook = XLSX.read(data, {type:"array"});

    // collect your ID's here
};
reader.readAsArrayBuffer(input.files[index]);

Angular 7 读取excel文件的第一列并将其保存到数组中

Angular 7 reading the first column of an excel file and save it into an array

xlsx

typescript

angular

angular7