SOURCE

new Vue({
    el: '#app',
    data() {
        return {
            webofficeInstance: null,
            config: {
                "officeType": "docx",
                "appId": "e13d6cf1fad141eaa08266bc5b74e141",
                "fileId": "35000",
                "signature": {
                    "sign": "64d78d6fa5e5a06b78e2d3ce4a6f73138153b485",
                    "nonce": "3246",
                    "timeStamp": "1724759329969"
                },
                "endpoint": "https://test-cmp-doc.woa.com",
                "fileToken": "79774",
                "mode": "normal"
            },
            fileId: "35000",
            activeName: 'first', // 默认激活第一个标签页
            isExpanded: false,
        };
    },
    methods: {
        toggleExpand() {
            this.isExpanded = !this.isExpanded;
        },
        // 加载文档
        updateConfigFromJson() {
            try {
                const parsedConfig = JSON.parse(this.jsonConfig);
                if (typeof parsedConfig === "object" && parsedConfig !== null) {
                    this.config = { ...this.config, ...parsedConfig };
                    this.updateWps();
                } else {
                    alert("请输入有效的JSON格式配置");
                }
            } catch (error) {
                console.log(error, "JDK");
            }
        },
        async updateWps() {
            // 销毁已存在的WebOffice实例
            if (window.webofficeInstance && webofficeInstance.destroy) {
                webofficeInstance.destroy();
                webofficeInstance = null; // 销毁后清空引用
            }
            const iframeElement = document.getElementById("wpshtml");
            let mergedConfigs = {
                ...this.config,
                mount: iframeElement,
            };
            // console.log(mergedConfigs, "mergedConfigs1");
            // 初始化新的WebOffice实例
            window.webofficeInstance = TencentDocsSDK.init(mergedConfigs);
            await webofficeInstance.ready();
        },
        async getContentRange() {
            const contentControls = await webofficeInstance.Application.getActiveDocument().getContentControls();
            if (contentControls[0]) {
                console.log('result:getId', contentControls[0].getId());
                console.log('result:getRange', await contentControls[0].getRange());
                console.log('result:getContent', await contentControls[0].getContent());
            }
        },
        async getBookmarksRange() {
            const bookmarks = await webofficeInstance.Application.getActiveDocument().getBookmarks();
            if (bookmarks[0]) {
                console.log('result:getId', bookmarks[0].getId());
                console.log('result:getName', bookmarks[0].getName());
                console.log('result:getRange', await bookmarks[0].getRange());
            }
        },
    },

    computed: {
        jsonConfig: {
            get() {
                return JSON.stringify(this.config);
            },
            set(value) {
                try {
                    const parsedConfig = JSON.parse(value);
                    this.config = { ...this.config, ...parsedConfig };
                } catch (error) {
                    console.error("Failed to parse JSON:", error);
                }
            },
        },
    },
})

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js">

</script>

<style>
    .subject-box{
        font-size: 12px;
    }
	.subject-container {
        cursor: pointer;
    }
    .subject-header {
        display: flex;
        justify-content: space-between;
    }
    .ai-sys-info {
        font-size:12px;
    }
    .ai-sys-info .item-text {
        background: #fafafa;
        padding:5px 20px 5px 10px;
        color:#606060;
    }
</style>
<div id="app">
	<div style="width: 320px;height:800px; background:#fff;">
		<el-tabs v-model="activeName" @tab-click="handleTabClick">
			<el-tab-pane label="精准匹配" name="first">
				<transition name="fade">
					<div class="subject-box">
                        <div class="subject-container">
                            <div @click="toggleExpand" class="subject-header">
                                <div>
                                    <i :class="isExpanded?'el-icon-caret-bottom icon-ai-ai':'el-icon-caret-top icon-ai-ai'"></i>
                                    <span>我方主体</span>
                                </div>
                                <span>匹配结果</span>
                            </div>
                        </div>
                        <div class="ai-sys-info">
                            <p>系统录入信息</p>
                            <div style="display: flex;align-items: center;">
                                <div class="item-text">腾讯公司新新新</div>
                                <span style="margin-left:10px; color:#2BA471;" class=" item-text el-icon-success"><span/>
                            </div>
                        </div>
                        <div class="collapse" v-if="isExpanded">
                            <div class="ai-sys-info">
                                <p>文本片段</p>
                                <div style="display: flex;align-items: center;">
                                    <div class="item-text">腾讯公司新新新</div>
                                    <span style="margin-left:10px; color:#2BA471;" class=" item-text el-icon-success"><span/>
                                </div>
                            </div>
                        </div>

                    </div>
                </transition>
			</el-tab-pane>

			<el-tab-pane label="模糊匹配" name="second">
				<transition name="fade">
					<div class="ai-content-box">这里是产品介绍</div>
				</transition>
			</el-tab-pane>

			<el-tab-pane label="AI风险提示" name="third">
				<transition name="fade">
					<div class="ai-content-box">这里是关于我们</div>
				</transition>
			</el-tab-pane>
		</el-tabs>
	</div>
</div>