vue3 在线预览word及excel

Vue3本身并没有提供在线预览Word和Excel文档的功能，但是可以借助第三方库来实现。

其中比较常用的是使用office-web-viewer库来实现Word和Excel文件的在线预览。该库可以通过引入JavaScript文件来实现在线预览Word和Excel文件。具体实现方式可以参考官方文档：https://docs.microsoft.com/en-us/office/dev/add-ins/develop/office-online-embedding-office-content-in-an-iframe。

在Vue3中使用office-web-viewer库的步骤为：

1. 在Vue3项目中安装office-web-viewer库：

npm install office-web-viewer --save

2. 在需要预览Word和Excel文件的组件中引入office-web-viewer的JavaScript文件：

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js"></script>

3. 在需要预览Word和Excel文件的组件中使用office-web-viewer库提供的方法来实现预览功能：

import OfficeViewer from 'office-web-viewer';

export default {
  data() {
    return {
      fileUrl: 'https://example.com/sample.docx', // Word或Excel文件的URL地址
    };
  },
  mounted() {
    const viewer = new OfficeViewer({
      element: '#viewer', // 预览区域的DOM元素ID
      action: 'view', // 预览的动作，可以是view、print、edit等
      fileType: 'docx', // 文件类型，可以是docx、xlsx等
      embedAs: 'iframe', // 预览方式，可以是iframe或embed
      enableMobileFriendly: true, // 是否启用移动端友好模式
      supportFullScreen: true, // 是否支持全屏模式
    });
    viewer.embed(this.fileUrl); // 加载预览的Word或Excel文件
  },
};