使用WPS插件实现预览

以下是使用html页面进行示例，主要需求就是通过这个wpsjssdk实现在线预览链接的部分操作。
首先引入<script src="jsPlung/web-office-sdk-v1.1.19.umd.js"></script>这个插件，这里引入的是1.1.19版本，其使用的wps的jdk文档可看WebOffice 知识库。
下面是方法的引用

new Vue({ el: '#app', data() { return { // WPS 实例 wpsInstance: null, wpsApp: null, currentWpsUrl: '', }, mounted() { this.$nextTick(() => { this.initWps(); this.setDefaultSelection(); }); }, beforeDestroy() { this.destroyWps(); }, methods: { async initWps() { if (!this.currentUrl) { this.error.wps = true; this.error.message = '缺少 WPS 文档地址'; return; } this.loading.wps = true; this.error.wps = false; try { // 销毁旧实例 this.destroyWps(); // 配置 WPS this.wpsInstance = WPS.config({ url: this.currentUrl, mount: document.querySelector('#office') }); // 等待初始化完成 await this.wpsInstance.ready(); // 获取 Application 对象 this.wpsApp = this.wpsInstance.Application; // 控制目录显示（false 表示隐藏 WPS 自带目录） if (this.wpsApp && this.wpsApp.ActiveDocument) { this.wpsApp.ActiveDocument.ActiveWindow.DocumentMap = false; } this.loading.wps = false; } catch (error) { console.error('WPS Init Error:', error); this.error.wps = true; this.error.message = 'WPS 初始化失败：' + (error.message || '未知错误'); this.loading.wps = false; } }, destroyWps() { this.unbindWpsScrollEvent(); if (this.wpsInstance) { try { if (typeof this.wpsInstance.destroy === 'function') { this.wpsInstance.destroy(); } } catch (e) { console.warn('WPS destroy error:', e); } this.wpsInstance = null; this.wpsApp = null; } }, reloadWps() { this.initWps(); }, }

下面是页面的显示，具体样式可根据不同需求进行显示

<mainclass="preview-main"><!-- <div class="preview-title">{{ currentTitle }}</div> --><divclass="wps-container"><!-- WPS 挂载点 --><divid="office"></div><!-- 加载中 --><divv-if="loading.wps"class="loading-mask"><iclass="el-icon-loading"></i><span>正在加载 WPS 文档...</span></div><!-- 错误提示 --><divv-if="error.wps"class="loading-mask error-tip"><iclass="el-icon-error"style="font-size:32px;margin-bottom:12px;"></i><span>{{ error.message }}</span><el-buttonsize="small"@click="reloadWps"style="margin-top:12px;">重新加载</el-button></div></div></main>

因为initWps方法里面this.wpsInstance = WPS.config({ url: this.currentUrl, mount: document.querySelector('#office') });就是通过获取这个id进行挂载就可以了。
以上就是具体引用wpsJdk插件调用方式，具体其他监听可以看官方文档。