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

<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>

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