SheetJS 실전 가이드 — 브라우저에서 엑셀 읽고 쓰기 (xlsx vs ExcelJS 비교)

<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>

# SheetJS 공식 CDN 레지스트리를 통해 설치
npm install --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz

import * as XLSX from "xlsx"

npm install exceljs

import ExcelJS from "exceljs"

<input type="file" id="file-input" accept=".xlsx,.xls,.csv" />
<pre id="output"></pre>

document.getElementById("file-input").addEventListener("change", handleFile)

function handleFile(event) {
  const file = event.target.files[0]
  if (!file) return

  const reader = new FileReader()
  reader.onload = e => {
    // ArrayBuffer → Uint8Array
    const data = new Uint8Array(e.target.result)
    const workbook = XLSX.read(data, { type: "array" })

    const sheetName = workbook.SheetNames[0]
    const sheet = workbook.Sheets[sheetName]

    // 헤더를 키로 쓰는 객체 배열
    const rows = XLSX.utils.sheet_to_json(sheet, { defval: "" })
    document.getElementById("output").textContent = JSON.stringify(
      rows,
      null,
      2
    )
  }
  reader.readAsArrayBuffer(file)
}

function exportToExcel(rows, fileName = "export.xlsx") {
  // 1) 워크북 생성
  const workbook = XLSX.utils.book_new()

  // 2) JSON → 시트
  const sheet = XLSX.utils.json_to_sheet(rows)

  // 3) 시트 등록
  XLSX.utils.book_append_sheet(workbook, sheet, "Sheet1")

  // 4) 파일 다운로드 트리거
  XLSX.writeFile(workbook, fileName, { compression: true })
}

// 사용 예
exportToExcel([
  { id: 1, name: "홍길동", email: "hong@example.com" },
  { id: 2, name: "김자바", email: "java@example.com" },
])

const aoa = [
  ["ID", "이름", "이메일"],
  [1, "홍길동", "hong@example.com"],
  [2, "김자바", "java@example.com"],
]
const sheet = XLSX.utils.aoa_to_sheet(aoa)

// 컬럼 폭(글자 수 기준)
sheet["!cols"] = [{ wch: 6 }, { wch: 14 }, { wch: 28 }]

// 헤더 행 고정(첫 행)
sheet["!freeze"] = { xSplit: 0, ySplit: 1 }

// 셀 병합: A1:C1
sheet["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }]

import ExcelJS from "exceljs"

async function exportStyled(rows) {
  const wb = new ExcelJS.Workbook()
  const ws = wb.addWorksheet("회원")

  ws.columns = [
    { header: "ID", key: "id", width: 6 },
    { header: "이름", key: "name", width: 14 },
    { header: "이메일", key: "email", width: 28 },
  ]
  ws.addRows(rows)

  // 헤더 스타일
  ws.getRow(1).eachCell(cell => {
    cell.font = { bold: true, color: { argb: "FFFFFFFF" } }
    cell.fill = {
      type: "pattern",
      pattern: "solid",
      fgColor: { argb: "FF2F5597" },
    }
    cell.alignment = { vertical: "middle", horizontal: "center" }
  })

  const buffer = await wb.xlsx.writeBuffer()
  const blob = new Blob([buffer], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  })
  const url = URL.createObjectURL(blob)
  const a = document.createElement("a")
  a.href = url
  a.download = "members.xlsx"
  a.click()
  URL.revokeObjectURL(url)
}

// worker.js
importScripts(
  "https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"
)
self.onmessage = e => {
  const wb = XLSX.read(e.data, { type: "array" })
  const rows = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
  self.postMessage(rows)
}

import * as XLSX from "xlsx"

export function ExcelExportButton({ rows }) {
  const onClick = () => {
    const ws = XLSX.utils.json_to_sheet(rows)
    ws["!cols"] = [{ wch: 6 }, { wch: 14 }, { wch: 28 }]
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, "목록")
    XLSX.writeFile(wb, `export-${Date.now()}.xlsx`, { compression: true })
  }
  return <button onClick={onClick}>엑셀 다운로드</button>
}

<script setup>
import * as XLSX from "xlsx"

const props = defineProps({ rows: Array })

function download() {
  const ws = XLSX.utils.json_to_sheet(props.rows)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, "목록")
  XLSX.writeFile(wb, "export.xlsx", { compression: true })
}
</script>

<template>
  <button @click="download">엑셀 다운로드</button>
</template>