@onlyoffice/document-editor-vue针对excel文件的预览或编辑

前提：你已有 ONLYOFFICE Document Server（本地 / 内网 / 云服务器均可，本文用 http://localhost:8080 作为示例地址）。

安装依赖

# 创建新项目（已有项目可跳过）npm create vue@3 onlyoffice-vue3-democd onlyoffice-vue3-demo# 安装 ONLYOFFICE Vue 组件npm install --save @onlyoffice/document-editor-vue

组件：OnlyOfficeExcelEditor.vue

<template>  <divstyle="width: 100%; height: 90vh; border: 1px solid #eee;">    <DocumentEditor      id="excelEditor"      :document-server-url="docServerUrl"      :config="editorConfig"      :on-load-component-error="onLoadError"      :events_onDocumentReady="onDocumentReady"      :events_onDocumentSave="onDocumentSave"    />  </div></template><scriptsetup>import { ref, reactive } from 'vue';import { DocumentEditor } from '@onlyoffice/document-editor-vue';// 1. 你的 ONLYOFFICE Document Server 地址const docServerUrl = ref('http://localhost:8080');// 2. 文档唯一 KEY（必须每次不同，避免缓存）const excelKey = ref('excel_' + Date.now());// 3. Excel 专属配置（核心区别在这里）const editorConfig = reactive({  width: '100%',  height: '100%',  // ✅ Excel 必须写 cell  documentType: 'cell',  // 文档基础信息  document: {    fileType: 'xlsx', // excel 格式    key: excelKey.value,    title: '表格编辑.xlsx',    // ✅ 你的 Excel 文件下载地址（Document Server 能访问）    url: 'http://localhost:8080/static/demo.xlsx',  },  // 编辑器配置  editorConfig: {    mode: 'edit', // edit 编辑 / view 只读    lang: 'zh-CN',    user: {      id: 'user_001',      name: '表格操作员',    },    // ✅ 保存回调（后端接收文件）    callbackUrl: 'http://localhost:3000/api/onlyoffice/callback',    // ✅ Excel 专用配置（可选）    customization: {      showSheetTabs: true, // 显示工作表标签      hideRightMenu: false, // 不隐藏右侧菜单    },  },});// 加载失败const onLoadError = (err) => {  console.error('Excel 编辑器加载失败：', err);};// 加载完成const onDocumentReady = () => {  console.log('Excel 加载完成，可编辑');};// 保存触发const onDocumentSave = (e) => {  console.log('Excel 自动保存触发：', e);};</script>

在 App.vue 中使用

<template>  <div>    <h2>ONLYOFFICE Excel 在线编辑</h2>    <OnlyOfficeExcelEditor />  </div></template><scriptsetup>import OnlyOfficeExcelEditor from './components/OnlyOfficeExcelEditor.vue';</script>

Excel 关键配置说明（和 Word 不同）

配置项	值	说明
`documentType`	`cell`	必须是 cell ，代表 Excel / 电子表格
`fileType`	`xlsx`	Excel 格式
`url`	xlsx 文件地址	必须能被 Document Server 直接下载
`mode`	`edit`	可编辑模式

支持的文件格式

编辑：xlsx、xls、ods、csv
预览：所有表格格式

后端保存回调（和 Word 通用）

之前给你的 Node/Express 接口完全不用改，直接可以保存 Excel 文件。

常见问题

1，Excel 打不开

检查 documentType: 'cell'
检查文件地址是 .xlsx 且能被 Document Server 访问

2，不能编辑

确认 mode: 'edit'
确认文件格式是可编辑格式（xlsx）

3，没有工作表标签

在 customization 加 showSheetTabs: true