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 style="background:#fff; width:300px;">

		<div class="content-inner">
			<div class="dw-mian">
				<div class="content-center">
					<div class="title">版本1</div>
					<span class="text-color">已锁定</span>
					<span class="text-color">2024/11/22</span>
					<el-button size="mini" plain icon="">下载</el-button>
				</div>
                <div>
                    <i class="el-icon-lock"></i>
                </div>
		</div>
	</div>

    </div>

</div>

  p {
      padding: 0;
  }
  
  .dw-mian {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;
  }
  
  .content-inner {
      display: flex;
  }
  
  .content-center {
      /* display: flex */
      font-size: 12px
  }
  
  .dw-mian {
      display: flex
  }
  
  .text-color {
      color: rgba(0, 0, 0, 0.4);
      display: block;
      padding: 5px 0;
    box-sizing: border-box;
  }
  
  .title {
      font-size: 13px;
  }
  
  .el-icon-lock {
      padding: 20px
  }