在线表格示例

使用 LuckySheet 实现类似 Excel 的在线表格功能。

功能特性

• 📊 在线编辑 - 类似 Excel 的编辑体验
• 🎨 样式设置 - 支持单元格样式、合并单元格
• 📈 图表支持 - 支持图表插入
• 💾 数据导入导出 - 支持 Excel 导入导出

安装依赖

npm install luckysheet

基础用法

<template>
  <div ref="luckysheet" class="luckysheet-container"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const luckysheet = ref()

onMounted(() => {
  // 初始化 LuckySheet
  window.luckysheet.create({
    container: 'luckysheet',
    title: '在线表格',
    lang: 'zh',
    data: [
      {
        name: 'Sheet1',
        color: '',
        status: 1,
        order: 0,
        celldata: [
          { r: 0, c: 0, v: { v: '姓名' } },
          { r: 0, c: 1, v: { v: '年龄' } },
          { r: 0, c: 2, v: { v: '部门' } },
          { r: 1, c: 0, v: { v: '张三' } },
          { r: 1, c: 1, v: { v: 28 } },
          { r: 1, c: 2, v: { v: '技术部' } }
        ]
      }
    ]
  })
})
</script>

<style scoped>
.luckysheet-container {
  width: 100%;
  height: 500px;
}
</style>

完整示例

<template>
  <div class="page-container">
    <div class="toolbar">
      <h2 class="page-title">在线表格示例</h2>
      <div class="actions">
        <el-button @click="getData">获取数据</el-button>
        <el-button @click="exportExcel">导出 Excel</el-button>
        <el-upload
          accept=".xlsx"
          :auto-upload="false"
          :on-change="importExcel"
          :show-file-list="false"
        >
          <el-button type="primary">导入 Excel</el-button>
        </el-upload>
      </div>
    </div>
    
    <div ref="luckysheetContainer" class="luckysheet-container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const luckysheetContainer = ref()

onMounted(() => {
  initLuckysheet()
})

const initLuckysheet = () => {
  const options = {
    container: luckysheetContainer.value,
    title: '在线表格',
    lang: 'zh',
    showtoolbar: true,
    showinfobar: true,
    showsheetbar: true,
    showstatisticBar: true,
    enableAddRow: true,
    enableAddBackTop: true,
    data: [
      {
        name: 'Sheet1',
        color: '',
        status: 1,
        order: 0,
        celldata: [
          { r: 0, c: 0, v: { v: '姓名', bl: 1, bg: '#f0f0f0' } },
          { r: 0, c: 1, v: { v: '年龄', bl: 1, bg: '#f0f0f0' } },
          { r: 0, c: 2, v: { v: '部门', bl: 1, bg: '#f0f0f0' } },
          { r: 0, c: 3, v: { v: '薪资', bl: 1, bg: '#f0f0f0' } },
          { r: 1, c: 0, v: { v: '张三' } },
          { r: 1, c: 1, v: { v: 28, ct: { fa: '0', t: 'n' } } },
          { r: 1, c: 2, v: { v: '技术部' } },
          { r: 1, c: 3, v: { v: 15000, ct: { fa: '¥#,##0', t: 'n' } } },
          { r: 2, c: 0, v: { v: '李四' } },
          { r: 2, c: 1, v: { v: 25, ct: { fa: '0', t: 'n' } } },
          { r: 2, c: 2, v: { v: '产品部' } },
          { r: 2, c: 3, v: { v: 12000, ct: { fa: '¥#,##0', t: 'n' } } }
        ],
        config: {
          merge: {},
          rowlen: {},
          columnlen: {}
        }
      }
    ]
  }
  
  window.luckysheet.create(options)
}

const getData = () => {
  const data = window.luckysheet.getAllSheets()
  ElMessage.success('数据已打印到控制台')
  console.log(data)
}

const exportExcel = () => {
  window.luckysheet.exportExcel()
  ElMessage.success('导出成功')
}

const importExcel = (file) => {
  // 使用 LuckyExcel 导入
  const reader = new FileReader()
  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result)
    // 处理导入逻辑
    ElMessage.success('导入成功')
  }
  reader.readAsArrayBuffer(file.raw)
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.luckysheet-container {
  flex: 1;
  border: 1px solid #e0e0e0;
}
</style>

配置选项

const options = {
  // 容器
  container: 'luckysheet',
  
  // 标题
  title: '在线表格',
  
  // 语言
  lang: 'zh',
  
  // 是否显示工具栏
  showtoolbar: true,
  
  // 是否显示信息栏
  showinfobar: true,
  
  // 是否显示底部 Sheet 栏
  showsheetbar: true,
  
  // 是否显示统计栏
  showstatisticBar: true,
  
  // 是否允许添加行
  enableAddRow: true,
  
  // 是否允许回到顶部
  enableAddBackTop: true,
  
  // 数据
  data: []
}

常用 API

// 获取所有 Sheet 数据
const data = window.luckysheet.getAllSheets()

// 获取当前 Sheet 数据
const sheetData = window.luckysheet.getSheetData()

// 获取选中区域的值
const selection = window.luckysheet.getRangeValue()

// 设置单元格值
window.luckysheet.setCellValue(0, 0, '新值')

// 导出 Excel
window.luckysheet.exportExcel()

// 刷新
window.luckysheet.refresh()

// 销毁
window.luckysheet.destroy()

单元格属性

{
  r: 0,        // 行索引
  c: 0,        // 列索引
  v: {
    v: '值',    // 单元格值
    m: '显示值', // 显示值
    bl: 1,      // 粗体
    it: 1,      // 斜体
    ff: '宋体', // 字体
    fc: '#ff0000', // 字体颜色
    bg: '#ffff00', // 背景颜色
    fs: 14,     // 字体大小
    ht: '0',    // 水平对齐 0-居中 1-左对齐 2-右对齐
    vt: '0'     // 垂直对齐 0-居中 1-上对齐 2-下对齐
  }
}