vue-office+element-ui 预览docx、xlsx、pdf文件

要在Vue应用中使用element-ui组件库来预览docx、xlsx和pdf文件，可以使用如下方法：

1. 使用vue-office组件来显示Office文档。
2. 使用element-ui的Dialog组件来创建一个模态对话框。
3. 使用vue-pdf组件来显示PDF文件。

以下是一个简单的示例代码：

首先，安装所需的npm包：

npm install vue-office element-ui vue-pdf

然后，在Vue组件中使用它们：

<template>
  <div>
    <!-- Office文件预览 -->
    <el-dialog title="Office文件预览" :visible.sync="officeDialogVisible" width="80%">
      <vue-office :src="officeFileUrl" />
    </el-dialog>
 
    <!-- PDF文件预览 -->
    <el-dialog title="PDF文件预览" :visible.sync="pdfDialogVisible" width="80%">
      <vue-pdf :src="pdfFileUrl" />
    </el-dialog>
 
    <!-- 触发按钮 -->
    <el-button @click="officeDialogVisible = true">打开Office文件</el-button>
    <el-button @click="pdfDialogVisible = true">打开PDF文件</el-button>
  </div>
</template>
 
<script>
import { Dialog, Button } from 'element-ui';
import VuePdf from 'vue-pdf';
import VueOffice from 'vue-office';
 
export default {
  components: {
    [Dialog.name]: Dialog,
    [Button.name]: Button,
    VuePdf,
    VueOffice
  },
  data() {
    return {
      officeDialogVisible: false,
      pdfDialogVisible: false,
      officeFileUrl: 'path/to/your/docx_or_xlsx_file.docx', // Office文件的URL
      pdfFileUrl: 'path/to/your/pdf_file.pdf' // PDF文件的URL
    };
  }
};
</script>

请确保你的Vue项目已经正确集成了element-ui，并且替换officeFileUrl和pdfFileUrl为你的实际文件URL。这个示例中的文件URL可以是本地路径或者远程URL。

注意：vue-office组件可能不支持所有Office文件的全部功能，它依赖于Office在线版本的服务。对于复杂的文档，可能会有限制或者显示不完全。对于更复杂的文档处理需求，可能需要考虑使用专业的Office文档查看器或者其他库。