使用vue在WPS中实现AI智能助手

1.准备环境

1. npm install -g wpsjs
2. wpsjs create HelloWps
   

参考wpsjs工具包使用 加载项在线模式和离线模式

2.演示视频

vue实现WPS中AI智能助手

3.主要代码部分

通过组件调用getSelectedText方法获取到wps选中的文本
通过wps.Application.Selection.Paste()方法将获取的文本粘贴到wps中
ps：使用粘贴的方式是应为 获取的AI文本格式为HTMl格式，wps没有对应插入的方法，暂时只能使用
粘贴方式保证回答的文本格式不丢失，如果有更好的处理方式请大佬指教。

<template>
  <div class="">
    <div>
      <el-tabs v-model="activeName" type="card" class="demo-tabs" @click="handleClick">
        <el-tab-pane label="AI问答" name="0"></el-tab-pane>
        <el-tab-pane label="文本润色" name="1"></el-tab-pane>
        <el-tab-pane label="智能核稿" name="2"></el-tab-pane>
      </el-tabs>
    </div>
    <CustomChat :activeName="activeName" @getTextValue="getTextValue" />
  </div>
</template>

<script>
import CustomChat from '@/components/CustomChat.vue'
import Login from '@/pages/Login.vue'
import copyImg from '@/assets/copy.svg'
export default {
  name: 'Chat',
  components: { CustomChat, Login },
  props: {},
  data() {
    return {
      activeName: '0',
      activeNameWrapper: {
        value: this.activeName
      }
    }
  },
  provide() {
    return {
      getSelectedText: this.getSelectedTextWrapper,
      activeName: {
        value: this.activeNameWrapper
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async append() {
      wps.Application.Selection.Paste()
    },

    handleClick() {
      console.log(this.activeName)
      this.activeNameWrapper.value = this.activeName
    },

    getTextValue(text) {
      console.log(text)
      // this.append(text.appentText)
      this.append(text.mdAnswer)
    },

    // 辅助方法：将图片URL转换为Base64
    async getImageBase64(url) {
      try {
        const response = await fetch(url)
        const blob = await response.blob()
        return new Promise((resolve, reject) => {
          const reader = new FileReader()
          reader.onloadend = () => {
            // 移除Data URL前缀（"data:image/png;base64,"）
            const base64data = reader.result.split(',')[1]
            resolve(base64data)
          }
          reader.onerror = () => reject(reader.error)
          reader.readAsDataURL(blob)
        })
      } catch (error) {
        console.error('Error fetching image:', error)
        throw error // 重新抛出以便外层捕获
      }
    },
    async getSelectedText() {
      try {
        let text = wps.ActiveDocument.ActiveWindow.Selection.Text
        console.log('🚀 ~ getSelectedText ~ text:', text)
        return text
      } catch (error) {
        console.error('Error getting selected text from Word:', error)
        throw error // 重新抛出错误以便调用者可以处理它
      }
    },
    
    getSelectedTextWrapper() {
      return new Promise((resolve, reject) => {
        this.getSelectedText()
          .then((text) => resolve(text))
          .catch((error) => reject(error))
      })
    }
  }
}
</script>

<style scoped lang="scss">
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>