XLSX 엑셀 파일 프런트 엔드는 분석 사용

먼저 XLSX 설치

NPM XLSX 설치

프로젝트 소개

'XLSX'에서 가져 오기 XLSX;

업로드 컴포넌트, 쓰기 스타일에 너무 게으른 때문에, 업로드 구성 요소가 여기에 사용, 사용 <입력 유형 = "파일"/>도 가능 antd.

사용 customRequest 사용자 정의 업로드

                < 업로드 
                    이름 = "파일" 
                    동의 = ". XLS는, .xlsx '에" 
                    showUploadList = { 거짓 } 
                    customRequest = {업로드}
                 > 
                    <스팬 클래스 명 = {CNS (style.btn, style.import)}> 
                        <IMG SRC = {importPNG } /> 
                        <SPAN>导入数据</ SPAN> 
                    </ SPAN> 
                </ 업로드>

핵심 코드, 엑셀을 구문 분석

    업로드 = CONST (E) => { 
        F CONST = e.file는, 
        리더 CONST = 새로운 새 을 FileReader는 (); //을 FileReader를 사용하여 데이터를 판독 
        reader.onload = 함수 (E)가 {// 완료 콜백 후의 데이터를 읽어 
          데이터가 CONST = 새로운 새 Uint8Array (e.target.result) 
          CONST 통합 = XLSX.read (데이터 유형 { '배열'});   // 통합 Excel로 객체를 반환 파싱 XLSX 
      
          CONST firstSheetName = workbook.SheetNames [0 ];   //는 제 1 시트 명을 취득 
          워크 workbook.Sheets = CONST [firstSheetName];   //는 제 1 용지의 내용을 얻을
          XLSX.utils.sheet_to_json RES = CONST (워크)   //는 사용의 용이성을 위해 배열 콘텐츠 유틸 변환의 방법을 이용 

          // 다음 어레이는 라인에 자신의 동작이다 
          CONST = 목록 항목 res.map (=> {
               창 { 
                  키워드 : item.keyword, 
                  중량 : item.weight 
              } 
          }) 
          
          wordObj.setKeys (... wordObj.keys ...리스트])를 
        } 
        reader.readAsArrayBuffer (F) // 판독 데이터 
    };