vue3 vue-office 打开新窗口 文件预览

Vue3 中的 Vue-Office 插件是一个用于在浏览器中嵌入 Office Online 应用，如 Word、Excel 和 PowerPoint 的轻量级组件。它允许你通过 URL 方式打开文档，并提供文件预览功能。在 Vue 项目中，你可以按照以下步骤使用 Vue-Office：

1. 安装插件：首先，在你的 Vue 项目中安装 `vue-office`，可以使用 npm 或 yarn 进行安装：

   npm install vue-office
   # 或者
   yarn add vue-office

2. 引入并配置：在你的 Vue 组件中引入并配置该插件：

import { createOffice } from 'vue-office';

export default {
  setup() {
    const office = createOffice({
      // 配置选项，比如 office.com域名，是否需要身份验证等
      clientId: 'your-client-id',
      apiHost: 'https://api.office.com',
    });

    // 使用方法：
    function previewFile(fileUrl) {
      return new Promise((resolve, reject) => {
        office.open(fileUrl)
          .then(response => {
            if (response.status === 200) {
              resolve('文件已成功预览');
            } else {
              reject('文件预览失败');
            }
          })
          .catch(error => reject(error));
      });
    }

    return {
      previewFile,
    };
  },
};

3. 调用预览函数：

<template>
  <button @click="previewFile('http://example.com/document.docx')">预览文件</button>
</template>

当你点击“预览文件”按钮时，会尝试打开 Office Online 并预览指定的文件。