Vue接入Web Office开放平台

不完美女孩-

于 2024-06-21 17:03:32 发布

阅读量178

点赞数 2

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/LJJONESEED/article/details/139865687

版权

<!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>