vue项目在线预览docx文件

安装组件库： 首先，你需要安装vue-office的docx预览组件以及vue-demi（用于Vue2和Vue3的兼容）：

npm install @vue-office/docx vue-demi

引入组件和样式： 在你的Vue组件中引入VueOfficeDocx组件和相关的CSS样式：

import VueOfficeDocx from '@vue-office/docx' 
import '@vue-office/docx/lib/index.css'

使用组件： 在模板中使用<vue-office-docx>标签，并设置:src属性为.docx文件的网络地址。同时，你可以设置组件的样式，比如高度，并监听rendered和error事件：

<template><div><input type="file" @change="onFileChange" accept=".docx" /><a href="#" @click.prevent="previewDocx">预览 DOCX 文档</a><div v-html="docContent" class="doc-preview"></div><!-- 文档预览组件 --><vue-office-docxv-if="docxSrc":src="docxSrc"style="height: 600px;"@rendered="renderedHandler"@error="errorHandler"/></div>
</template><script>
import { ref } from 'vue';import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'export default{name:'TestDoc1',components: {VueOfficeDocx},setup(){// const arrayBuffer = ref(null)const docContent = ref('')const docxSrc = ref(null)const onFileChange = async (event) => {const file = event.target.files[0];if (file) {const reader = new FileReader();reader.onload = (e) => {// 将文件读取为ArrayBufferdocxSrc.value = e.target.result;};reader.readAsArrayBuffer(file);}};const renderedHandler = () => {console.log("文档渲染完成");}const errorHandler = (error) => {console.error("文档渲染失败:", error);}return {onFileChange,docContent,renderedHandler,errorHandler,docxSrc};}}
</script>
<style>.docx-table {width: 100%;border-collapse: collapse;
}.docx-table th, .docx-table td {border: 1px solid #000;padding: 8px;text-align: left;
}
</style>