React 가 져 오기 엑셀 파일 내 보 내기 실현

표현 층
여 기 는 antd 의 Upload 업로드 구성 요 소 를 사용 합 니 다.
antd 부분 코드 참조

import { Button,Table,Upload } from 'antd';

<Upload {...props} fileList={state.fileList}>
    <Button type="primary" >Excel  </Button>
</Upload>

<Button type="primary" onClick={handleExport}>Excel  </Button>

실무 층
우선 업 무 를 분석 해 보 자.

엑셀 가 져 오기 작업:사용자 가 엑셀 표를 올 리 고 표 의 내용 을 json 대상 으로 전환 하여 백 엔 드 처리 가 편리 하고 백 엔 드 는 데이터 베 이 스 를 저장 합 니 다

엑셀 내 보 내기 작업:백 엔 드 제 이 슨 형식 데 이 터 를 가 져 오고 전단 은 데 이 터 를 sheet 작업 얇 은 대상 으로 변환 하 며 생 성 된 대상 은 엑셀 표 다운로드 내 보 내기 로 변환 합 니 다

다음은 기술 차원 의 세부 사항 이다.
핵심 플러그 인 xlsx
설치 xlsx:npm install xlsx --save-dev
주요 소개 에 사용 되 는 핵심 api:
XLSX.read(data,type)/해석 Excel 데이터

workbook.Sheets[workbook.SheetNames[0]//workbook 대상 중의 첫 번 째 sheet 표를 가 져 와 서 사용자 에 게 하나의 sheets 만 있 도록 규정 하고 workbook 을 이해 하지 못 하 는 다음 에 설명 이 있 습 니 다

XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]],{header:1,defval:'})/워 크 북 대상 을 JSON 대상 배열 로 변환 합 니 다.defval 이 설정 되 지 않 으 면 기본 값 은 empty 입 니 다

XLSX.utils.json_to_sheet(json)//json 대상 을 워 크 북 대상 으로 변환 합 니 다

// workbook   ：
{
    SheetNames: ['sheet1', 'sheet2'],
    Sheets: {
        // worksheet
        'sheet1': {
            // cell
            'A1': { ... },
            // cell
            'A2': { ... },
            ...
        },
        // worksheet
        'sheet2': {
            // cell
            'A1': { ... },
            // cell
            'A2': { ... },
            ...
        }
    }
}

엑셀 가 져 오기
핵심 코드:

const f = file;
const reader = new FileReader();
reader.onload = function (e) {
    try{
        const datas = e.target.result;
        const workbook = XLSX.read(datas, {type: "binary",}); //  datas
        const first_worksheet = workbook.Sheets[workbook.SheetNames[0]]; //             sheet
        const jsonArr = XLSX.utils.sheet_to_json(first_worksheet, {header: 1,defval:''}); //         JSON    
        handleImpotedJson(jsonArr)//     
        message.success('Excel      ！')
    }catch(e){
      message.error('       ！       ')
    } 
};
reader.readAsBinaryString(f);

이해:

FileReader 대상 의 예화 file 대상 은 onload 이벤트 에서 처 리 됩 니 다

XLSX.read 분석 데이터

XLSX.utils.sheet_to_json(first_worksheet,{header:1,defval:'})분 석 된 워 크 북 대상 을 JSON 대상 으로 전환 합 니 다

excel 내 보 내기
핵심 코드:

const downloadExcel = () =>{
    const json = handleExportedJson(data)
    const sheet = XLSX.utils.json_to_sheet(json);
    openDownloadDialog(sheet2blob(sheet,"Sheet1"), "    .xls")
}
const handleExportedJson = (array) =>{...}  //   Json  
const openDownloadDialog = (url, saveName) =>{...} //     
const sheet2blob = (sheet, sheetName) =>{...} //   blob  

이해:

처 리 된 제 이 슨 형식 데이터

XLSX.utils.json_to_sheet(json)을 sheet 워 크 북 대상 으로 변환 합 니 다

sheet2blob(sheet,saveName)는 워 크 북 대상 을 blob 로 변환 합 니 다

openDownloadDialog 에서 blob 주 소 를 만 들 고탭 을 통 해 다운로드 동작 을 실현 합 니 다

excel 내 보 내기 플러그 인(js-export-excel)그동안 왜 실 현 된 코드 를 놓 지 않 았 습 니까?그것 은 좋 은 플러그 인 이 있 는 것 을 발 견 했 기 때 문 이 아 닙 니까?코드 는 간단 합 니 다.핵심 코드: //직접 파일 내 보 내기 let dataTable = []; //excel 파일 의 데이터 내용 let option = {}; //option 은 엑셀 파일 을 대표 합 니 다. dataTable = data; //데이터 원본 option.fileName="파일 다운로드";/excel 파일 이름 console.log("data===",dataTable) option.datas = [ { sheetData:dataTable,/excel 파일 의 데이터 원본 sheet Name:'Sheet 1',//excel 파일 의 sheet 페이지 이름 sheetFilter:['id','name','belong','step','tag'],/excel 파일 에 표시 할 열 데이터 sheetHeader:['프로젝트 id','프로젝트 이름','소속 사','프로젝트 단계','프로젝트 태그'],//excel 파일 의 각각 헤더 이름 } ] let toExcel = new ExportJsonExcel(option); //엑셀 파일 생 성 toExcel.saveExcel(); //엑셀 파일 다운로드 이 플러그 인의 기본 사용법 은 Blob 내 보 내기,압축 지원 등 을 지원 합 니 다.자세 한 내용 은 홈 페이지 참조핵심 옵션 설명:fileName 다운로드 파일 이름(기본 값:다운로드)datas data: /*여러 sheet*/ /*sheet 마다 object*/ [{ sheetData:[],//데이터 sheet Name:',//(필요 하지 않 음)sheet 이름,기본 값 sheet 1 sheetFilter:[],//(필요 하지 않 음)열 필터(data 가 object 로 만 작 동 합 니 다) sheetHeader:[]//첫 줄,제목 columnWidths:[]//(필요 하지 않 음)열 폭 은 열 순서 와 대응 해 야 합 니 다. }] 브 라 우 저 지원:ie 10+테스트 를 통 해 demo 는 chrom,Safari,IE 에서 모두 사용 할 수 있 습 니 다.실현 효과 그리고 몰라요.결어React 가 가 져 오기 엑셀 파일 내 보 내기 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 React 가 져 오기 엑셀 내 보 내기 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!