Spire.WordJS 基于 HTML5 标准，支持跨平台开发和集成，支持所有主流浏览器，无需安装任何插件或第三方组件，以原生的方式嵌入各类应用，可以与各类前端技术框架Vue、React、Angular 等相结合。 Spire.WordJS以纯前端、跨平台的能力，让您的应用系统轻松获得与Word，WPS文档一致的交互体验。
此示例为您完整演示Vue框架中如何使用Spire.WordJS文档编辑器创建、编辑并打印 Word 格式（DOCX）的文档：
<template> <div class="form"> <div id="iframeEditor"> </div> </div> </template> <script setup> import { ref, onMounted, onUnmounted } from 'vue'; import { storeToRefs } from 'pinia'; import { useFileStore } from '../stores/file.js' import { useRouter } from 'vue-router'; const fileStore = useFileStore() // Pinia 中当存储的数据 const { file, fileUint8Data } = storeToRefs(fileStore) const router = useRouter() const config = ref({}); const isOpened = ref(false); const editorInstance = ref(null); const apiInstance = ref(null); const originUrl = window.location.origin onMounted(() => { // 没有文件时直接跳回上传页 if (!file.value) { router.replace('/'); return; } // 使用script的方式载入 loadScript(); window.addEventListener('resize', OnWindowReSize); }) onUnmounted(() => { window.removeEventListener('resize', OnWindowReSize); }) // 初始化编辑器所需的配置对象 function initConfig() { if (!file.value) { throw new Error('未找到文件，请重新上传'); } if (!fileUint8Data.value) { throw new Error('未找到文件数据，请重新上传'); } config.value = { "fileAttrs": { "fileInfo": { "name": file.value.name, "ext": getFileExtension(), "primary": String(new Date().getTime()), "creator": "Jonn", "createTime": "2022-04-18 11:30:43" }, "sourceUrl": originUrl + "/files/__ffff_192.168.2.134/" + file.value.name, "createUrl": originUrl + "/open", "mergeFolderUrl": "", "fileChoiceUrl": "", "templates": {} }, "user": { "id": "uid-1", "name": "Jonn", "canSave": true, }, "editorAttrs": { "editorMode": "edit", //edit / view "editorWidth": "100%", "editorHeight": "100%", "editorType": "document", "platform": "desktop", //desktop / mobile / embedded "viewLanguage": "zh", //en / zh "isReadOnly": false, "canChat": true, "canComment": true, "canReview": true, "canDownload": true, "canEdit": true, "canForcesave": true, "embedded": { "saveUrl": "", "embedUrl": "", "shareUrl": "", "toolbarDocked": "top" }, "useWebAssemblyDoc": true, "useWebAssemblyExcel": true, "useWebAssemblyPpt": true, "spireDocJsLicense": "", "spireXlsJsLicense": "", "spirePresentationJsLicense": "", "spirePdfJsLicense": "", "serverless": { "useServerless": true, "baseUrl": originUrl, "fileData": fileUint8Data.value, }, "events": { "onSave": onFileSave }, "plugins": { "pluginsData": [] } } }; } // 创建并渲染 SpireCloudEditor 实例 function initEditor() { let iframeId = 'iframeEditor'; initConfig(); isOpened.value = true; editorInstance.value = new SpireCloudEditor.OpenApi(iframeId, config.value); // 创建编辑器实例 window.Api = apiInstance.value = editorInstance.value.GetOpenApi(); // 暴露 OpenApi 便于调试/保存 OnWindowReSize(); } // 获取上传文件的扩展名，用于配置 fileInfo.ext function getFileExtension() { const filename = file.value.name.split(/[\\/]/).pop(); // 获取最后一个点后的内容 return filename.substring(filename.lastIndexOf('.') + 1).toLowerCase() || ''; } // 调整编辑器容器尺寸，使其随窗口大小自适应 function OnWindowReSize() { let wrapEl = document.getElementsByClassName("form"); if (wrapEl.length) { wrapEl[0].style.height = screen.availHeight + "px"; window.scrollTo(0, -1); wrapEl[0].style.height = window.innerHeight + "px"; } } // 动态加载 SpireCloudEditor 脚本，避免重复注入 function loadScript() { if (window.SpireCloudEditor) { initEditor() return } const script = document.createElement('script'); script.setAttribute('src', '/spire.cloud/web/editors/spireapi/SpireCloudEditor.js'); script.onload = () => initEditor() document.head.appendChild(script); } // Spire 编辑器的保存回调，可接入自定义保存逻辑 function onFileSave(data) { console.log('save data', data) } </script> <style> .form, iframe, body { min-height: 100vh !important; min-width: 100vh !important; } </style>Spire.WordJS文档编辑器界面选项清晰易懂，遵循Microsoft Word 和WPS通用规则，您可以快速在线完成 Word 文档的创建, 编辑, 打印及保存等。Spire.WordJS的每个独立功能均设为独立模块，可协助您搭建满足自身需求的轻量 Word 编辑工具。
Spire.WordJS文档编辑器核心功能：
- 创建与编辑：打开和保存文档。
- 支持的文档格式：.doc, .docx, .wps, .wpt, .docm, .dotm 等
- 支持元素：文本、图片、超链接、表格、书签、页码、目录、页眉页脚等。
- 格式设置：文本层级、段落层级、项目符号与编号、表格层级、页面设置及样式。
- 编辑操作：撤销、重做、剪切、复制、粘贴。
- 文档内文本查找替换。
如需要更多详细资料，请留言
