Angular 从使用 XLSX 上传的 excel 中获取 headers

Question

我想从上传的 excel 文件中获取第一行（姓名、电子邮件、手机）作为数组。

I am using XLSX.

我正在将整个数据放入数组中。但是，我只想阅读第一行。因为，

my excel file is quite large.

onFileChange(event) { //when user uploads xls file
    const fileList: FileList = event.target.files;
    if (fileList.length > 0) {
      const file: File = fileList[0];
      const reader = new FileReader();
      reader.onload = function (e) {
        const arrayBuffer = this.result,
          data = new Uint8Array(arrayBuffer),
          arr = new Array();
        for (let i = 0; i !== data.length; ++i) {
          arr[i] = String.fromCharCode(data[i]);
        }    
        const bstr = arr.join('');

        const workbook: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });
        const firstSheetName: string = workbook.SheetNames[0];
        const worksheet: XLSX.WorkSheet = workbook.Sheets[firstSheetName];
        // getting all rows
        console.log(XLSX.utils.sheet_to_json(worksheet, { header: 1 })); 
        // I want to get top row only.
        console.log(XLSX.utils.decode_row('A1')); 

      };
      reader.readAsArrayBuffer(file);
    }
  }

Answer 1

function get_header_row(sheet) 
{
    var headers = [];
    var range = XLSX.utils.decode_range(sheet['!ref']);
    var C, R = range.s.r; 
     * start in the first row */
    /* walk every column in the range */
    for(C = range.s.c; C <= range.e.c; ++C) 
   {
        var cell = sheet[XLSX.utils.encode_cell({c:C, r:R})] 

        /* find the cell in the first row */
        var hdr = "UNKNOWN " + C; // <-- replace with your desired default 
        if(cell && cell.t) 
         hdr = XLSX.utils.format_cell(cell);

        headers.push(hdr);
    }
    return headers;
}

Answer 2

我已经尝试过文件上传，下面是我的步骤和结果，包括数据和 header、

这也将在 excel sheet,

中支持多个 sheet

1.npm install --save xlsx
    
2.import * as XLSX from 'xlsx';

3.HTML Code:

<input type="file" (change)="onFileChange($event)">

4.Angular Typescript:

  exceltoJson = {};

  onFileChange(event: any) {
    this.exceltoJson = {};
    let headerJson = {};
    /* wire up file reader */
    const target: DataTransfer = <DataTransfer>(event.target);
    // if (target.files.length !== 1) {
    //   throw new Error('Cannot use multiple files');
    // }
    const reader: FileReader = new FileReader();
    reader.readAsBinaryString(target.files[0]);
    console.log("filename", target.files[0].name);
    this.exceltoJson['filename'] = target.files[0].name;
    reader.onload = (e: any) => {
      /* create workbook */
      const binarystr: string = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(binarystr, { type: 'binary' });
      for (var i = 0; i < wb.SheetNames.length; ++i) {
        const wsname: string = wb.SheetNames[i];
        const ws: XLSX.WorkSheet = wb.Sheets[wsname];
        const data = XLSX.utils.sheet_to_json(ws); // to get 2d array pass 2nd parameter as object {header: 1}
        this.exceltoJson[`sheet${i + 1}`] = data;
        const headers = this.get_header_row(ws);
        headerJson[`header${i + 1}`] = headers;
        //  console.log("json",headers)
      }
      this.exceltoJson['headers'] = headerJson;
      console.log(this.exceltoJson);
    };
  }

  get_header_row(sheet) {
    var headers = [];
    var range = XLSX.utils.decode_range(sheet['!ref']);
    var C, R = range.s.r; /* start in the first row */
    /* walk every column in the range */
    for (C = range.s.c; C <= range.e.c; ++C) {
      var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
      // console.log("cell",cell)
      var hdr = "UNKNOWN " + C; // <-- replace with your desired default 
      if (cell && cell.t) {
        hdr = XLSX.utils.format_cell(cell);
        headers.push(hdr);
      }
    }
    return headers;
  }

5.Result
{filename: "uploadedexcel.xlsx", sheet1: Array(212), sheet2: Array(8), headers: {…}}

Results 包含上传的 excel 名称，sheet1 和 sheet2 中的数据以及 sheet1 和 [=] 中的 header 24=]2.

上传的 excel sheets 有 sheet1 和 sheet2.

Answer 3

// getting all rows
this.data = (XLSX.utils.sheet_to_json(worksheet, { header: 1 })); 
// Fetch the first row
const header = this.data.shift();

Answer 4

我在 excel sheet 中将此代码用于单行 header，但我想要两行 header。欢迎提出建议。

var Heading =[
  [ "EMPLOYEE","SCORES","COMMENTS"]  
];
  
const myworksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.emp ,{skipHeader:true});
XLSX.utils.sheet_add_json(myworksheet,this.emp,{skipHeader:true , origin: 'A2'});
XLSX.utils.sheet_add_aoa(myworksheet, Heading);

Answer 5

这里我从 blob

中取出 excel sheet

public DisplayExcelRows（来自 blob 的 ExcelURL）{

var url = ExcelURL; 
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
var excelrows: any;

oReq.onload = () => {
  var arraybuffer = oReq.response;

  /* convert data to binary string */
  var data = new Uint8Array(arraybuffer);
  var arr = new Array();
  for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
  var bstr = arr.join("");

  /* Call XLSX */
  var workbook = XLSX.read(bstr, { type: "binary" });

  /* DO SOMETHING WITH workbook HERE */
  var first_sheet_name = workbook.SheetNames[0];
  /* Get worksheet */
  var worksheet = workbook.Sheets[first_sheet_name];
  excelrows = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

  //this will extract headers and other rows separately

  this.data = excelrows;
  this.header = this.data.shift(); //splitting headers and other rows


}

Answer 6

我发现最简单的方法，如果你使用 json 方法，那么它已经用 header 中的 KEYS 生成 objects 所以当使用：

this.decoded = utils.sheet_to_json(workSheet);

只需执行此操作即可获得 headers（假设已解码任何内容）：

this.columns = Object.keys(this.decoded[0]);

这将为您提供列，只需获取最初用于从列名生成它们的 object 键

Angular 从使用 XLSX 上传的 excel 中获取 headers

Angular get headers from excel uploaded using XLSX

import

excel

file-upload

xlsx

angular