vue引用vue-office实现docx、excel、pdf等文件预览

### 集成 `vue-office-docx` 实现在 Vue3 中预览 DOC 文件 为了在 Vue3 项目中集成 `vue-office-docx` 插件并实现 DOCX 文件的在线预览，需按照以下说明操作。 #### 安装依赖包 首先，在项目的根目录下执行命令以安装必要的依赖项： ```bash npm install @vue-office/docx --save-dev ``` 这一步骤确保了开发环境中包含了用于处理 DOCX 文件所需的库[^1]。 #### 修改配置文件 编辑 `package.json` 文件中的 dependencies 字段，确认已加入如下条目： ```json { "dependencies": { "@vue-office/docx": "^1.6.0" } } ``` 此设置保证应用打包时能够正确解析所使用的组件版本号[^2]。 #### 组件编写与使用 创建一个新的 Vue 单文件组件 (`.vue`) 或者修改现有页面模板部分 (`<template>`)，添加如下 HTML 结构来定义展示区域： ```html <div> <!-- 文档路径可通过 props 动态传递 --> <VueOfficeDocx :src="documentUrl" style="width:80%" @rendered="handleRender"/> </div> ``` 接着，在 `<script setup>` 或普通的 `<script>` 标签内导入所需模块，并初始化数据属性以及事件处理器函数： ```javascript import { ref, defineComponent } from 'vue'; import VueOfficeDocx from '@vue-office/docx'; export default defineComponent({ name: 'DocumentViewer', components: { VueOfficeDocx, }, setup() { const documentUrl = ref('https://example.com/path/to/document.docx'); function handleRender() { console.log('文档渲染完成'); } return { documentUrl, handleRender, }; }, }); ``` 注意这里采用了 Composition API 的写法风格更适合 Vue3 特性；同时记得引入样式表以便正常显示界面元素： ```css /* 可选 */ @import '~@vue-office/docx/lib/index.css'; /* 如果采用单文件组件形式则在此处引入CSS */ ``` 以上即完成了基本的功能搭建工作。当用户访问该页面时即可看到指定 URL 下载下来的 Word 文档被转换为网页格式呈现出来[^3]。