spire.officejs-vue

A Vue package is one of the plugins that use to operate the spire-officejs product

Installation

npm install spire.officejs-vue

The instructions for the usage:

// 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; //Should be replaced with actual file data, selected manually by the user
const fileUint8Data = fileUint8Data; //Should be replaced with the actual Uint8Array data from the file
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:7000`;
    originUrl = `http://127.0.0.1:7000`;
  } else if (import.meta.env.PROD) {
    serverUrl = `${tempUrl.origin}/spire.officejs`;
    originUrl = `${tempUrl.origin}/spire.officejs`;
  }

  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) {
  //Custom Save Logic
  console.log("save data", data);
}
<script>

Key Parameters

| Properties| Explanation | Type | Default | | --------- | ------------ | -------- | ------------------------ | | id | editor dockerid | string | 'SpireofficejsEditor' | | config | config Para | object | —— | | serverUrl | Server URL | string | 'http://127.0.0.1:7000 |

⚠️ Notice

This Vue component requires the spire.officejs plugin in order to function.

| Build Tools | Plugin Name | Corresponding Address | | -------- | -------------------------- | ----------------------------------------------------------------------- | | vite | vite-plugin-spire.officejs | Jump to |