spire.officejs-vue-test 1.0.1

package/README.md

@@ -0,0 +1,162 @@
+# spire.officejs-vue
+
+一个可以打开`spire-officejs`产品的vue3组件
+
+# 安装
+
+```bash
+npm install spire.officejs-vue
+```
+
+# 使用方式
+
+```js
+// 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
+// *.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 | [跳转](https://www.npmjs.com/package/vite-plugin-spire.officejs) |

package/es/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./src/index";
+import type { App } from "vue";
+declare const _default: {
+    install: (app: App) => void;
+};
+export default _default;

package/es/index.mjs

@@ -0,0 +1,13 @@
+import * as t from "./src/index.mjs";
+import { SpireEditor as s } from "./src/officeJs-editor/index.mjs";
+const i = {
+  install: (r) => {
+    Object.entries(t).forEach(([o, e]) => {
+      r.component(e.name, e);
+    });
+  }
+};
+export {
+  s as SpireEditor,
+  i as default
+};

package/es/src/components.d.ts

@@ -0,0 +1,8 @@
+import * as components from "./index";
+declare module "@vue/runtime-core" {
+    export interface GlobalComponents {
+        EaButton: typeof components.Button;
+        EaIcon: typeof components.Icon;
+    }
+}
+export { };

package/es/src/index.d.ts

@@ -0,0 +1 @@
+export * from './officeJs-editor';

package/es/src/index.mjs

@@ -0,0 +1,4 @@
+import { SpireEditor as e } from "./officeJs-editor/index.mjs";
+export {
+  e as SpireEditor
+};

package/es/src/officeJs-editor/index.mjs

@@ -0,0 +1,9 @@
+import e from "./officeJs-editor.vue.mjs";
+const r = (t) => (t.install = (n) => {
+  const a = t.name;
+  n.component(a, t);
+}, t), i = r(e);
+export {
+  i as SpireEditor,
+  i as default
+};

package/es/src/officeJs-editor/officeJs-editor.vue.mjs

@@ -0,0 +1,61 @@
+import { defineComponent as g, onMounted as m, openBlock as h, createElementBlock as E, createElementVNode as v } from "vue";
+import "./style/index.css";
+import r from "spireofficejs-editors";
+const w = { class: "spire-officejs-EditorWarpper" }, S = ["id"], A = /* @__PURE__ */ g({
+  name: "spire-officejs-Editor",
+  __name: "officeJs-editor",
+  props: {
+    id: {
+      type: String,
+      default: "SpireofficejsEditor"
+    },
+    config: {
+      type: Object,
+      required: !0
+    },
+    serverUrl: {
+      type: String,
+      default: "http://127.0.0.1:3001"
+    }
+  },
+  setup(n) {
+    let o, t, s;
+    const i = n;
+    m(() => {
+      l();
+    });
+    function l() {
+      i.config && i.config.editorAttrs ? (f(), a(), d()) : setTimeout(() => {
+        l();
+      }, 100);
+    }
+    function c() {
+      if (r && r.OpenApi) {
+        const e = r.OpenApi;
+        o = new e(i.id, s), window.Api = o.GetOpenApi(), u();
+      }
+    }
+    function d() {
+      var e = document.createElement("script"), p = `${t}/editors/spireapi/SpireCloudEditor.js`;
+      e.setAttribute("src", p), e.onload = () => c(), document.body.appendChild(e);
+    }
+    function f() {
+      s = i.config;
+    }
+    function a() {
+      i.serverUrl ? i.serverUrl.endsWith("/") ? t = i.serverUrl.substring(0, i.serverUrl.length - 1) : t = i.serverUrl : t = window.location.origin;
+    }
+    function u() {
+      let e = document.getElementsByClassName(
+        "spire-officejs-EditorWarpper"
+      );
+      e.length && (e[0] && (e[0].style.height = screen.availHeight + "px"), window.scrollTo(0, -1), e[0] && (e[0].style.height = window.innerHeight + "px"));
+    }
+    return (e, p) => (h(), E("div", w, [
+      v("div", { id: n.id }, null, 8, S)
+    ]));
+  }
+});
+export {
+  A as default
+};

package/es/src/officeJs-editor/officeJs-editor.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./officeJs-editor.vue.mjs";
+export {
+  f as default
+};

package/es/src/officeJs-editor/style/index.css

@@ -0,0 +1,5 @@
+.spire-officejs-EditorWarpper,
+iframe {
+  min-height: 100%;
+  min-width: 100%;
+}

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./src/index";
+import type { App } from "vue";
+declare const _default: {
+    install: (app: App) => void;
+};
+export default _default;

package/lib/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./src/index.js"),r=require("./src/officeJs-editor/index.js"),n={install:t=>{Object.entries(i).forEach(([o,e])=>{t.component(e.name,e)})}};exports.SpireEditor=r.SpireEditor;exports.default=n;

package/lib/src/components.d.ts

@@ -0,0 +1,8 @@
+import * as components from "./index";
+declare module "@vue/runtime-core" {
+    export interface GlobalComponents {
+        EaButton: typeof components.Button;
+        EaIcon: typeof components.Icon;
+    }
+}
+export { };

package/lib/src/index.d.ts

@@ -0,0 +1 @@
+export * from './officeJs-editor';

package/lib/src/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./officeJs-editor/index.js");exports.SpireEditor=e.SpireEditor;

package/lib/src/officeJs-editor/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./officeJs-editor.vue.js"),u=e=>(e.install=r=>{const i=e.name;r.component(i,e)},e),t=u(n.default);exports.SpireEditor=t;exports.default=t;

package/lib/src/officeJs-editor/officeJs-editor.vue.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");require("./style/index.css");const n=require("spireofficejs-editors"),v={class:"spire-officejs-EditorWarpper"},h=["id"],m=t.defineComponent({name:"spire-officejs-Editor",__name:"officeJs-editor",props:{id:{type:String,default:"SpireofficejsEditor"},config:{type:Object,required:!0},serverUrl:{type:String,default:"http://127.0.0.1:3001"}},setup(o){let s,r,l;const i=o;t.onMounted(()=>{c()});function c(){i.config&&i.config.editorAttrs?(u(),a(),f()):setTimeout(()=>{c()},100)}function p(){if(n&&n.OpenApi){const e=n.OpenApi;s=new e(i.id,l),window.Api=s.GetOpenApi(),g()}}function f(){var e=document.createElement("script"),d=`${r}/editors/spireapi/SpireCloudEditor.js`;e.setAttribute("src",d),e.onload=()=>p(),document.body.appendChild(e)}function u(){l=i.config}function a(){i.serverUrl?i.serverUrl.endsWith("/")?r=i.serverUrl.substring(0,i.serverUrl.length-1):r=i.serverUrl:r=window.location.origin}function g(){let e=document.getElementsByClassName("spire-officejs-EditorWarpper");e.length&&(e[0]&&(e[0].style.height=screen.availHeight+"px"),window.scrollTo(0,-1),e[0]&&(e[0].style.height=window.innerHeight+"px"))}return(e,d)=>(t.openBlock(),t.createElementBlock("div",v,[t.createElementVNode("div",{id:o.id},null,8,h)]))}});exports.default=m;

package/lib/src/officeJs-editor/officeJs-editor.vue2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./officeJs-editor.vue.js");exports.default=e.default;

package/lib/src/officeJs-editor/style/index.css

@@ -0,0 +1,5 @@
+.spire-officejs-EditorWarpper,
+iframe {
+  min-height: 100%;
+  min-width: 100%;
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "spire.officejs-vue-test",
+  "version": "1.0.1",
+  "main": "lib/index.js",
+  "module": "es/index.mjs",
+  "scripts": {
+    "release": "release-it"
+  },
+  "files": [
+    "es",
+    "lib"
+  ],
+  "keywords": [
+    "spire.officejs",
+    "vue3"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "spire.officejs-editors": "*",
+    "spire.officejs-externs": "*",
+    "spire.officejs-fonts": "*",
+    "spire.officejs-document": "*",
+    "spire.officejs-pdf": "*",
+    "spire.officejs-presentation": "*",
+    "spire.officejs-common": "*",
+    "spire.officejs-spreadsheet": "*"
+  },
+  "author": "e-iceblue",
+  "license": "MIT",
+  "description": "",
+  "typings": "lib/index.d.ts"
+}