<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>WebOffice-DOCX</title>
  <link rel="icon" href="https://qnfile.ljserver.cn/static/logo_n.png">
</head>
<div id="html"></div>
<script src="https://qnfile.ljserver.cn/static/web-office-sdk-solution-v2.0.5.umd.js"></script>

<body>
  <script>
    let html=document.getElementById('wpshtml')
    window.onload = () => {
      WebOfficeSDK.init({
        officeType: WebOfficeSDK.OfficeType.Writer, // 文件类型
        appId: "SX20240523IHSSBJ", // 你申请的预览服务的appid
        mount:html,
        fileId: "1",  // 文件id
        token: "1" // 预览token,其实这里传递的是userId,实际不要这么搞,这里只是测试
      })
    }
  </script>
</body>

</html>











<template>
  <div>
    <div id="wpshtml" style="width: 80%"> </div>
  </div>
</template>

<script>
import Vue from "vue";

export default {
  data() {
    return {

    };
  },
  mounted() {
    this.openWps()
  },
  methods: {
    openWps(){
      let html=document.getElementById('wpshtml')
      console.log(Vue.prototype.wps)
      Vue.prototype.wps.init({
        officeType:Vue.prototype.wps.OfficeType.Writer,//文件类型docx
        appId:"后端提供",//你申请的预览服务的appid
        fileId:"后端提供",// 文件id
        mount:html,
        token:"1"// 预览token,其实这里传递的是userId,实际不要这么搞,这里只是测试
      })
    }
  }

};
</script>

<style lang="less" scoped>

</style>
# 前端 # vue.js # javascript
Logo
乐奇 Rokid 开放社区

更多推荐

AI眼镜微型件连接 激光焊和胶接怎么选

所谓智能眼镜微型件连接工艺选型，是指在镜腿铰链、中梁、摄像头模组、FPC 与 PCB 互连、腔体密封、塑料壳体这些尺度在亚毫米到数毫米之间的连接界面上，按热预算、接头强度、气密要求与疲劳寿命四项约束，在激光熔焊、激光锡焊、回流焊、电阻焊、结构胶接与超声波焊之间做出取舍的工艺决策方法（来源：精密焊接在智能眼镜制造中的应用行业资料）。

avatar 乐奇 Rokid 开放社区
cover

全球 AI / 科技简报｜2026 年 9 月 4 日

avatar 乐奇 Rokid 开放社区

朱老师教你玩转 AIUI 开源项目 — 上传到 GitHub 即刻参与开源协作

如果说 AIUI Sports Agents 适合用来学习“运动数据、设备验证和平台提审如何分工”，EverMind 则是另一个很适合新手观察的开源案例：它把长期记忆框架、命令行工具、Agent 插件和公开文档拆成清晰的模块，让读者能够沿着 README、Quick Start、架构说明和贡献指南逐层理解一个项目。检查与收束读第八章。填写项目问卷时，进入 Issues → New issue，选择

avatar 乐奇 Rokid 开放社区