excel
English시작하기

문서 › 시작

시작하기

CDN 한 줄이나 npm으로 붙이고, 함수만 쓰거나 폼 컴포넌트를 씁니다.

82excel은 브라우저와 Node에서 xlsx·xls·csv 파일을 읽고, 머리글 규칙에 맞는지 검사하는 무료(MIT) 라이브러리입니다. 런타임 의존성은 fflate 하나이고, 파일과 그 내용은 밖으로 나가지 않습니다.

사용 방식 두 가지

  • 함수만 쓰기(스크립트): Excel82.inspect / check / readRows / rulesFromTemplate / makeTemplate 를 직접 호출합니다. CDN 전역이나 import { … } from '82excel' 로 쓰고, Node에서도 됩니다. 화면은 없습니다.
  • 끌어다 놓는 폼 컴포넌트 <excel-82>: 파일 선택·검사 결과·미리보기·업로드가 들어 있는 웹 컴포넌트입니다. HTML 속성만으로 규칙을 줍니다.

CDN으로 붙이기

공개 CDN jsDelivr 주소입니다. 운영에서는 이처럼 버전을 고정하세요. 같은 파일이 https://82excel.com/cdn/v0.1.0/82excel.min.js 에도 있습니다. 스크립트가 전역 Excel82 를 만들고 <excel-82> 를 등록하며, 한국어 메시지도 들어 있습니다. ESM 빌드는 같은 폴더의 82excel.esm.js 입니다.

<script src="https://cdn.jsdelivr.net/npm/82excel@0.1.0/dist/cdn/82excel.min.js"></script>

방식 1: 함수만

<script src="https://cdn.jsdelivr.net/npm/82excel@0.1.0/dist/cdn/82excel.min.js"></script>

<input type="file" id="f">
<script>
  document.getElementById('f').onchange = async (e) => {
    const r = await Excel82.check(e.target.files[0], {
      headers: ['이름', '전화번호', '금액'],
      locale: 'ko',
    });
    console.log(r.ok, r.errors);
  };
</script>

방식 2: 폼 컴포넌트

<script src="https://cdn.jsdelivr.net/npm/82excel@0.1.0/dist/cdn/82excel.min.js"></script>

<form action="/save" method="post">
  <excel-82 name="excel" required headers="이름,전화번호,금액" min-rows="1"
            accept="xlsx,xls,csv" locale="ko" upload="/api/upload"></excel-82>
  <button>제출</button>
</form>

npm으로 설치하기

npm i 82excel
import { check } from '82excel';   // 함수만. DOM을 쓰지 않아 Node에서도 import 됩니다
import '82excel/element';           // import만 하면 <excel-82> 가 등록됩니다 (브라우저)
import '82excel/locales/ko';        // 한국어 메시지 등록(locale: 'ko')
진입점내용
82excel함수만(inspect, check, readRows, rulesFromTemplate, makeTemplate, registerLocale, VERSION). Node 사용 가능
82excel/element웹 컴포넌트 <excel-82>. import하면 바로 등록됩니다(여러 번 import해도 한 번). 다른 태그 이름이 더 필요하면 defineExcelElement('my-excel'). 한국어 메시지 포함
82excel/locales/ko한국어 메시지
82excel/cdn/*CDN 빌드(82excel.min.js IIFE, 82excel.esm.js)

다음 단계