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",
        };
    },
    methods: {
        // 加载文档
        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>
<div id="app">
	<div>
		<div class="iteration-card__heading">
			    <div class="title-container">
                    <!-- 更多按钮 -->
                    <el-dropdown class="button-more" placement="top-start" trigger="click">
                        <el-button size="mini">
                            <div class="dit el-icon-more"></div>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-lock">锁定</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-delete">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

				    <div title="CMPV1.0Beta247(日常运营优化)" class="iteration_title">
                        <i class="el-icon-folder icon"></i>
					    <span>CMPV1.0Beta247(日常运营优化)</span><!---->
                    </div>
                </div>
                <div class="iteration-card-date">
                    2024-11-25 ~ 2024-12-31
                </div>
                <div class="botton-solid"></div>
                <div class="status-content">
                    <span>版本v1</span>
                    <span>仅预览</span>
                </div>

        </div>
    </div>

</div>

#app{
    background: #fff;
    width: 100%;
    height: 100%;
}
.iteration-card__heading {
    position: relative;
    border: 1px solid #ddd;
    height: 11ppx;
    width: 210px;
    border-radius: 4px;
    padding: 10px 21px 10px 15px;
    font-size: 15px;
    color: #152646;
}
.icon {
    font-size: 2em;
    margin-right:5px; 
}
.iteration_title {
    display: flex;
    align-items: center;
    width: 195px;
}
.iteration-card-date {
    padding: 10px 0;
    font-size: 12px;
    color: #5b677d
}
.botton-solid {
    border-bottom: 1px dashed #e8e9ec;
}
.button-more.el-dropdown {
    position: absolute;
    right: 5px;
    top: 5px;
}
.el-button--mini{
    padding: 6px !important;
    transform: rotate(450deg)
}

.status-content{
    font-size: 12px;
    line-height: 20px;
    font-weight: 400px;
    padding-top: 4px;
    margin-bottom: 4px;
    color: #56bd5b;
}

.iteration-card__heading:hover {
    border: 1px solid #d4e4ff; /* 背景颜色变化 */
    cursor: pointer; /* 鼠标指针变化 */
}

.iteration-card__heading .button-more.el-dropdown:hover {
    background-color: #d4e4ff; /* 下拉按钮背景颜色变化 */
}

.iteration-card__heading .el-dropdown-menu {
    display: block; /* 下拉菜单显示 */
    visibility: visible;
    opacity: 1;
    transition: all 0.3s ease;
}

.iteration-card__heading .el-dropdown-menu .el-dropdown-item:hover {
    background-color: #d4e4ff; /* 菜单项背景颜色变化 */
}