Vue.js集成Word实现在线编辑功能

npm install @microsoft/microsoft-graph-client @microsoft/microsoft-graph-types

// src/config.js
export const clientId = 'YOUR_CLIENT_ID';
export const clientSecret = 'YOUR_CLIENT_SECRET';
export const redirectUri = 'http://localhost:8080/callback';
export const authority = 'https://login.microsoftonline.com/common';
export const scopes = ['User.Read', 'Files.ReadWrite.All', 'Sites.ReadWrite.All'];

// src/Auth.js
import msal from '@azure/msal-browser';
import { clientId, clientSecret, redirectUri, authority, scopes } from './config';

const msalConfig = {
  auth: {
    clientId,
    authority,
    redirectUri,
  },
  cache: {
    cacheLocation: 'sessionStorage',
    storeAuthStateInCookie: false,
  },
};

const msalInstance = new msal.PublicClientApplication(msalConfig);

export function login() {
  const request = {
    scopes,
  };

  msalInstance.loginPopup(request).catch((error) => {
    console.error('Login failed:', error);
  });
}

export function getToken() {
  return msalInstance.acquireTokenSilent({ scopes }).catch((error) => {
    console.error('Failed to acquire token silently:', error);
    return msalInstance.acquireTokenPopup({ scopes });
  });
}

<!-- src/components/WordEditor.vue -->
<template>
  <div>
    <button @click="login">登录 Office 365</button>
    <button v-if="isLoggedIn" @click="openWordDocument">编辑 Word 文档</button>
    <div v-if="isEditing" ref="editorContainer"></div>
  </div>
</template>

<script>
import { login, getToken } from '../Auth';
import * as microsoftGraph from '@microsoft/microsoft-graph-client';
import { Client, ItemId } from '@microsoft/microsoftgraph-types';

export default {
  data() {
    return {
      isLoggedIn: false,
      isEditing: false,
      accessToken: null,
    };
  },
  methods: {
    async login() {
      await login();
      this.isLoggedIn = true;
      this.accessToken = await getToken();
    },
    async openWordDocument() {
      if (!this.accessToken) {
        console.error('No access token found.');
        return;
      }

      const client = microsoftGraph.Client.init({
        authProvider: (done) => {
          done(null, `Bearer ${this.accessToken}`);
        },
      });

      try {
        const result = await client.api('/me/drive/root/children')
          .get();

        const wordFile = result.value.find((item) => item.name === 'example.docx');
        if (wordFile) {
          const response = await client.api(`/me/drive/items/${wordFile.id}/workbook/worksheets`)
            .post();

          const workbook = new Client.Workbook(response.body);
         const worksheet = workbook.worksheets[0];

          this.isEditing = true;

          const editorContainer = this.$refs.editorContainer;
          editorContainer.innerHTML = ''; // 清空容器

          // 在这里，你可以使用Office.js API来进一步操作Word文档
          // 例如，添加事件监听器来响应编辑事件
          // ...
        }
      } catch (error) {
        console.error('Error opening Word document:', error);
      }
    },
  },
};
</script>

<!-- src/App.vue -->
<template>
  <div id="app">
    <WordEditor />
  </div>
</template>

<script>
import WordEditor from './components/WordEditor.vue';

export default {
  components: {
    WordEditor,
  },
};
</script>