@zbanx/excel-viewer

README

A simple excel viewer.

Usage

import '@zbanx/excel-viewer/styles.css'
import { ExcelViewer } from '@zbanx/excel-viewer'

// we will use xlsx to read excel file
import * as XLSX from 'xlsx-js-style'

const fileInput = document.querySelector(`#myInput[type='file']`)

fileInput.onchange = (e) => {
  const file = e.target.files?.[0]

  if (file) {
    const reader = new FileReader()

    reader.onload = (event) => {
      const buffer = new Uint8Array(event.target.result)
      const workbook = XLSX.read(buffer, { type: 'array' })
      const sheetName = workbook.SheetNames[0]
      const sheet = workbook.Sheets[sheetName]
      const data = XLSX.utils.sheet_to_json(sheet, {
        header: 1,
        defval: null,
        raw: false
      })

      const merges = sheet['!merges'] || []
      const viewer = new ExcelViewer({
        container: document.getElementById('my-container'),
        data,
        merges,
        editable: true
      })
    }

    reader.readAsArrayBuffer(file)
  }
}