Getting Started

Install

npm install @norio-office/office-excel

The package entry imports the default styles automatically:

import { OfficeExcel } from '@norio-office/office-excel'

If your build pipeline does not include package styles automatically, import them explicitly:

import '@norio-office/office-excel/style.css'

vue and yjs are peer dependencies. Vue must satisfy ^3.5.0.

Basic Usage

<script setup lang="ts">
import { ref } from 'vue'
import {
  OfficeExcel,
  type OfficeExcelWorkbookSnapshot,
} from '@norio-office/office-excel'

const workbook = ref<OfficeExcelWorkbookSnapshot | null>(null)
</script>

<template>
  <div class="excel-shell">
    <OfficeExcel v-model="workbook" mode="tabs" />
  </div>
</template>

<style scoped>
.excel-shell {
  height: 640px;
}
</style>

v-model binds the full workbook snapshot. If modelValue is not provided on first mount, the component creates a default workbook from title, sheetName, rowCount, and colCount, then emits update:modelValue.

Container Size

The root node defaults to width: 100% and height: 100%. Usually the host only needs to provide an explicit parent height:

<div style="height: 640px">
  <OfficeExcel v-model="workbook" />
</div>

You can also pass width / height directly. Numbers are treated as pixels; strings are used as CSS sizes:

<OfficeExcel v-model="workbook" :height="640" width="100%" />

Toolbar

<OfficeExcel mode="tabs" />
<OfficeExcel mode="menu" />

visibleTabs / visibleCommands are allowlists. hiddenTabs / hiddenCommands are blocklists. If both exist, the allowlist is applied first and the blocklist is applied after that.

<OfficeExcel
  :toolbar="{
    visibleTabs: ['start', 'data', 'view'],
    hiddenCommands: ['image', 'bar-chart', 'watermark']
  }"
/>

Permissions

<OfficeExcel
  readonly
  :permissions="{
    export: true,
    import: false,
    edit: false,
    manageSheets: false,
    insertImages: false,
    insertCharts: false,
    format: false
  }"
/>

Permission fields are allowed by default. Passing false disables the corresponding capability. disabled has the highest priority; readonly is intended for viewing and still allows selection, sheet switching, copy, and export.