excelljs에서 xlsx를 읽고 화면에 데이터를 표시합니다. React 버전

요약:

이전의 exceljs 관계가 되다.xlsx를 읽고 화면을 표시합니다.

INPUT/file형으로 데스크톱 등에서 xlsx를 읽을 수 있습니다.

프로비저닝

exceljs

React

node 14

연관성

아래 설명
https://qiita.com/TypoScript/items/0d5b08cecf959b8b822c

관련 보도

https://zenn.dev/knaka0209/articles/8b7423003038c8
https://zenn.dev/knaka0209/articles/c7427d9ee080d2

react 코드

INPUT/file형에서 xlsx를 입력하고 File API를 통해 exceljs를 읽고 화면 표시

File & Uint 8 Aray 변환

uploadFile: File>Blob&arraybuffer&Uint 8 Array 변환

excelljs Uint 8 Arry 읽기(열: ID, NAME, VALUE)

모든 칸에서 데이터를 읽습니다.배열에 저장합니다.state 변수에 저장

디스플레이 데이터

https://gist.github.com/kuc-arc-f/eac57b46ffdd3dd5e73bb1a37286db7e
xls7.tsx

/* XLS templete, read */
import React from 'react'
const ExcelJS = require('exceljs');
interface IProps {
  history:string[],
}
interface IState {
  items:Array<any>,
}
//
class Test extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = { items: [] }
  }  
  componentDidMount(){
    const self = this;
    window.document.getElementById("file1").addEventListener("change", function() {
      console.log("#change");
      self.uploadFile();
    });    
  }
  uploadFile(){
    const self = this;
    console.log("uploadFile");
    const files = document.querySelector<HTMLInputElement>('#file1').files;
    const fileObject = files[0]; 
    if (typeof fileObject === "undefined") {
      console.error("none, fileObject");
      return;
    }
//console.log(fileObject);
    const blobURL = window.URL.createObjectURL(fileObject);
    console.log(blobURL);
    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
      const result = xhr.response; // ArrayBuffer
//      console.log(result);
      const data = new Uint8Array(result);
//      console.log(data);
      self.loadExcelData(data);
    };
    xhr.responseType = "arraybuffer";
    xhr.open("GET", blobURL);
    xhr.send();    
    console.log("start-upload");
  }
  async loadExcelData(data: any){
    try{
      const workbook = new ExcelJS.Workbook();
      await workbook.xlsx.load(data);
      const worksheet = workbook.getWorksheet('sheet1');
      worksheet.pageSetup = {orientation:'portrait'};
      const startRow = 4;
      const items: any[] = [];
      let row = worksheet.getRow(1);
      for (let i = startRow; i < 11; i++) {
        row = worksheet.getRow(i);
        if(row.getCell(1).value !== null){
          console.log(row.getCell(1).value);
          let item = {
            ID: row.getCell(1).value,
            NAME: row.getCell(2).value,
            VALUE: row.getCell(3).value,
          }
          items.push(item);
        }
      }
  //    console.log(items);
      this.setState({items:items });
      alert("complete load data");
    } catch (e) {
      console.error(e);
      alert("Error, load data");
    }    
  }
  render(){
    console.log(this.state);
    return(
    <div className="container">
      <h1>xls7: read Sample</h1>
      <hr />
      File: <br />
      <input type="file" name="file1" id="file1" /><br />
      <hr className="my-1" />
      {/* table */}
      <h3>XXX経費資料</h3>
      <table className='table'>
        <thead>
        <tr>
          <th>ID</th>
          <th>NAME</th>
          <th>Price</th>
        </tr>
        </thead>
        <tbody>
        { this.state.items.map((item: any, index: number) => (
          <tr key={index}>
            <td>{item.ID}</td>
            <td>{item.NAME}</td>
            <td>{item.VALUE} JPY</td>
          </tr>
        ))        
        }
        </tbody>
      </table>
    </div>
    )
  }
}

export default Test;

이미지 등

읽는 화면

xlsx의 입력(이미지)

....