spire.officejs-vue

一个可以打开spire-officejs产品的vue3组件

安装

npm install spire.officejs-vue

使用方式

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import officejs-editor from 'spire.officejs-vue'

const app = createApp(App)

app.use(officejs-editor)
app.mount('#app')

// *.vue
<template>
  <div>
    <spire-officejs-Editor :config="config" :serverUrl="serverUrl"></spire-officejs-Editor>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeMount } from "vue";

let serverUrl;
let originUrl;
let config;
const file = file; // 此处需要替换为真实的File数据， 通过用户手动选择的文件
const fileUint8Data = fileUint8Data; // 此处需要替换为真实的File的Uint8Array数据
const editorTypes = {
  document: "document",
  pdf: "pdf",
  spreadsheet: "spreadsheet",
  presentation: "presentation"
};
const exts_document = ["docx", "docm", "doc", "dotx", "dotm", "dot", "odt", "fodt", "ott", "txt", "wps", "wpt"];
const exts_spreadsheet = ["xlsx", "csv", "xlsm", "xls", "xltx", "xltm", "xlt", "et", "ett"];
const exts_presentation = ["pptx", "pptm", "ppt", "ppsx", "ppsm", "pps", "potx", "potm", "dps", "dpt"];
const exts_pdf = ["pdf", "xps"];

onBeforeMount(() => {
  initConfig();
})

function initConfig() {
  var tempUrl = new URL(import.meta.url);
  var editorType = '';
  var ext = getFileExtension();
  if (import.meta.env.DEV) {
    serverUrl = `http://127.0.0.1:3001`;
    originUrl = `http://127.0.0.1:3001`;
  } else if (import.meta.env.PROD) {
    serverUrl = `${tempUrl.origin}/spireOfficejs`;
    originUrl = `${tempUrl.origin}/spireOfficejs`;
  }

  if(exts_document.includes(ext))
    editorType = editorTypes.document;
  else if(exts_spreadsheet.includes(ext))
    editorType = editorTypes.spreadsheet;
  else if(exts_presentation.includes(ext))
    editorType = editorTypes.presentation;
  else if(exts_pdf.includes(ext))
    editorType = editorTypes.pdf;

  config = {
    fileAttrs: {
      fileInfo: {
        name: file.name,
        ext: ext,
        primary: String(new Date().getTime()),
        creator: "Jonn",
        createTime: "2022-04-18 11:30:43"
      },
      sourceUrl: originUrl + "/files/__ffff_192.168.2.134/" + file.name,
      createUrl: originUrl + "/open",
      mergeFolderUrl: "",
      fileChoiceUrl: "",
      templates: {}
    },
    user: {
      id: "uid-1",
      name: "Jonn",
      canSave: true
    },
    editorAttrs: {
      editorMode: file.name.endsWith(".pdf") ? "view" : "edit",
      editorWidth: "100%",
      editorHeight: "100%",
      editorType: editorType,
      platform: "desktop",
      viewLanguage: "zh",
      isReadOnly: false,
      canChat: true,
      canComment: true,
      canReview: true,
      canDownload: true,
      canEdit: file.name.endsWith(".pdf") ? false : true,
      canForcesave: true,
      embedded: {
        saveUrl: "",
        embedUrl: "",
        shareUrl: "",
        toolbarDocked: "top"
      },
      useWebAssemblyDoc: true,
      useWebAssemblyExcel: true,
      useWebAssemblyPpt: true,
      useWebAssemblyPdf: true,
      spireDocJsLicense: "",
      spireXlsJsLicense: "",
      spirePresentationJsLicense: "",
      spirePdfJsLicense: "",
      serverless: {
        useServerless: true,
        baseUrl: originUrl,
        fileData: fileUint8Data
      },
      events: {
        onSave: onFileSave
      },
      plugins: {
        pluginsData: []
      }
    }
  };
}

function getFileExtension() {
  const filename = file.name.split(/[\\/]/).pop();
  return filename.substring(filename.lastIndexOf(".") + 1).toLowerCase() || "";
}

function onFileSave(data) {
  // 自定义保存逻辑
  console.log("save data", data);
}
<script>

参数

| 属性 | 说明 | 类型 | 默认 | | --------- | ------------ | -------- | ------------------------ | | id | editor容器id | string | 'SpireofficejsEditor' | | config | 配置参数 | object | —— | | serverUrl | 服务地址 | string | 'http://127.0.0.1:3001 |

⚠️ 注意事项

该vue组件需要搭配spire.officejs插件使用 | 构建工具 | 插件名称 | 对应地址 | | -------- | -------------------------- | ----------------------------------------------------------------------- | | vite | vite-plugin-spire.officejs | 跳转 |