vue3 docx-preview

实现 Vue3 中 DOCX 文档预览
为了在 Vue3 项目中实现 DOCX 文件的在线预览，可以采用 @vue-office/docx 组件库来完成这一功能。此组件支持 Vue2 和 Vue3 的兼容性，并提供了简单易用的 API 接口。
安装依赖包
通过 npm 或 yarn 来安装所需的两个主要依赖项：
npm install @vue-office/docx vue-demi
登录后复制
这一步骤确保了项目的正常运行环境包含了必要的工具和支持[^1]。
创建预览页面模板
接下来，在 Vue 单文件组件 (SFC) 中定义 HTML 结构如下所示：
<template>
<div class="preview-container">
<!-- 设置宽度并绑定文档 URL -->
<VueOfficeDocx :src="documentUrl" style="width:80%" @rendered="handleRendered"/>
</div>
</template>

<script setup>
import { ref } from 'vue';
import VueOfficeDocx from '@vue-office/docx';

// 初始化数据属性
const documentUrl = ref('https://example.com/path/to/document.docx');

function handleRendered() {
console.log('Document has been successfully rendered.');
}
</script>

<style scoped lang="scss">
.preview-container {
margin: auto;
text-align: center;
}
</style>
登录后复制
上述代码展示了如何配置 <VueOfficeDocx> 标签及其参数设置，同时导入样式表以增强视觉效果[^2]。
导入 CSS 资源
除了 JavaScript 库外，还需要加载对应的 CSS 文件以便正确显示渲染后的文档外观：
import '@vue-office/docx/lib/index.css'
登录后复制
这段语句应当放置于脚本部分顶部附近的位置，从而保证样式能够被及时应用到 DOM 元素上。