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

Vue.js 和 Element UI 结合时，要实现 .docx、.xlsx、.pdf 文件的在线预览，可以借助 vue-office 这个插件来处理不同格式文档的预览功能。以下是基于这些工具的一般步骤：

1. 安装依赖：

   npm install @vue-office/core @vue-office/pdf @vue-office/docx @vue-office/excel
   1

2. 导入并使用 Vue-office 组件：
   在你的 Vue 组件中，根据需要导入对应的预览组件：

   // 导入相关模块
   import { PdfViewer, DocxViewer, ExcelViewer } from '@vue-office/core';
   
   export default {
     components: {
       PdfViewer,
       DocxViewer,
       ExcelViewer
     },
     // ...
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11

3. 在模板中使用预览组件：
   假设你已经有了文件的 URL 或 Blob 对象，你可以这样使用预览组件：

   <template>
     <div>
       <!-- PDF 预览 -->
       <pdf-viewer :src="pdfSrc" />
   
       <!-- DOCX 预览 -->
       <docx-viewer :src="docxSrc" />
   
       <!-- XLSX 预览 -->
       <excel-viewer :src="xlsxSrc" />
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         pdfSrc: 'http://your-url-to-pdf-file.pdf',
         docxSrc: 'http://your-url-to-docx-file.docx',
         xlsxSrc: 'http://your-url-to-xlsx-file.xlsx'
       };
     }
     // ...
   };
   </script>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25

   如果是从后端接口获取文件流，你需要先调用接口获取到文件数据，并转换成合适的格式传给预览组件。

4. 结合 Element UI：
   如果你正在使用 Element UI，可以将预览组件与 Element UI 的布局或弹窗组件结合，例如在 ElDialog 中展示预览内容：

   <el-dialog :visible.sync="dialogVisible">
     <pdf-viewer v-if="fileType === 'pdf'" :src="fileSrc" />
     <docx-viewer v-else-if="fileType === 'docx'" :src="fileSrc" />
     <excel-viewer v-else-if="fileType === 'xlsx'" :src="fileSrc" />
   </el-dialog>
   1
   2
   3
   4
   5

请确保查阅 vue-office 的最新文档以获得准确的 API 使用方法，因为随着时间推移，插件可能会有更新或变动。同时，对于 PDF 预览，如果 vue-office 不支持或者有特殊需求，还可以考虑使用其他成熟的库如 pdf.js。