Vue文档编辑器（Word默认功能）示例

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 等
支持元素：文本、图片、超链接、表格、书签、页码、目录、页眉页脚等。
格式设置：文本层级、段落层级、项目符号与编号、表格层级、页面设置及样式。
编辑操作：撤销、重做、剪切、复制、粘贴。
文档内文本查找替换。

如需要更多详细资料，请留言