vue2中使用vue-office库预览pdf /docx/excel文件

### 如何在 Vue 3 中使用 `vue-office-docx` 进行 DOCX 文件操作 #### 安装依赖包 为了能够在 Vue 3 项目中集成 `vue-office-docx`，首先需要安装必要的 npm 包： ```bash npm install @vue-office/docx ``` 以及样式文件： ```bash npm install @vue-office/docx/lib/index.css ``` #### 创建组件并导入插件 创建一个新的 Vue 组件来展示 DOCX 文档的内容。确保按照如下方式设置模板结构和脚本逻辑。 #### 模板部分 定义 HTML 结构，在其中嵌套 `<VueOfficeDocx>` 标签，并指定其属性如 `src` 和事件监听器 `@rendered` 来响应渲染完成后的回调函数。 ```html <template> <div> <!-- 在 src 填入文档地址 --> <VueOfficeDocx :src="'http://example.com/path/to/document.docx'" style="width:80%" @rendered="handleRenderComplete" /> </div> </template> ``` #### 脚本部分 初始化组件选项对象时注册 `VueOfficeDocx` 组件；同时可以自定义一些方法比如当文档成功加载后执行的操作。 ```javascript <script setup> import { ref } from 'vue'; import VueOfficeDocx from '@vue-office/docx'; export default { name: "DocumentViewer", components: { VueOfficeDocx, }, methods: { handleRenderComplete() { console.log('DOCX file has been successfully rendered.'); } } } </script> ``` 注意这里采用了 Composition API (`setup`) 的写法，这是 Vue 3 推荐的方式[^1]。 #### 处理跨域问题 如果尝试访问外部服务器上的 DOCX 文件，则可能会碰到 CORS (Cross-Origin Resource Sharing) 政策限制。解决办法通常涉及配置服务端支持 CORS 或者通过代理转发请求到目标 URL[^3]。