@excel-report/vue

@excel-report/vue

ExcelReport 前端预览组件的 Vue 3 适配层 —— 一个 <ExcelViewer> 组件， 把后端 WebJsonExporter 导出的结构化 JSON 像素级还原成 Excel 表格。

基于 @excel-report/core，本包已把它作为依赖带上。

安装

pnpm add @excel-report/vue
# 或 npm i @excel-report/vue

vue 是 peer 依赖（>=3.3），由你的项目提供。

样式需显式引入一次：

import '@excel-report/core/style.css';

快速开始

<script setup lang="ts">
import { ExcelViewer } from '@excel-report/vue';
import '@excel-report/core/style.css';
import type { WebExcel } from '@excel-report/core';

defineProps<{ data: WebExcel }>();
</script>

<template>
  <ExcelViewer
    :data="data"
    :height="600"
    theme="light"
    readonly
    @cell-click="(e) => console.log(e.row, e.col, e.value)"
    @parse-warning="(w) => console.warn('[excel]', w.code, w.message)"
  />
</template>

全局注册

import { createApp } from 'vue';
import ExcelReportViewer from '@excel-report/vue';
import '@excel-report/core/style.css';

createApp(App).use(ExcelReportViewer).mount('#app');

Props

与 React 版一一对应：

事件

kebab-case：cell-click、cell-dblclick、cell-hover、cell-contextmenu、change、parse-warning

interface CellEvent {
  row: number;
  col: number;
  cell: ParsedCell;
  value: string | number | null;   // 文本值；非文本内容为 null
}

命令式滚动通过组件暴露的 scrollToRow / scrollToCell / getState（配合模板 ref 使用）。

图表

不装任何第三方库也能看到图表 —— core 内置零依赖 Canvas 渲染器（bar/line/area/scatter/pie）。

需要 tooltip / 缩放 / 动画时，加装 @excel-report/chart-echarts 并注入（整表替换，无法逐图切换）：

pnpm add @excel-report/chart-echarts echarts

<script setup lang="ts">
import { echartsChartRenderer } from '@excel-report/chart-echarts';
</script>

<template>
  <ExcelViewer :data="data" :chart-renderer="echartsChartRenderer" />
</template>

从 @excel-report/core 再导出的内容

只装本包也能拿到解析层与核心类型：

import { parseWebExcel } from '@excel-report/vue';
import type { WebExcel, ParsedSheet, ParsedCell, ParseWarning, CellEvent, ThemeInput } from '@excel-report/vue';

相关包

完整文档、数据契约与已知限制见 仓库 README。

License

MIT