安装docx-preview
 

 cnpm i docx-preview --save

在vue文件中使用

 <div ref="refWord" v-if="showType === 'word'" />

<script setup name="ResPreviewBox">import { ref } from 'vue' import { httpGet, httpGetBlob } from '../utils/request'import { defaultOptions, renderAsync } from 'docx-preview'const refWord = ref(null)const showType = ref('word')httpGetBlob(downloadResource).then(blobData => {if (blobData ) {if (showType.value === 'word') {const options = {className: 'docx', // 默认和文档样式类的类名/前缀inWrapper: true, //  启用围绕文档内容渲染包装器ignoreWidth: false, //  禁止页面渲染宽度ignoreHeight: false, //  禁止页面渲染高度ignoreFonts: false, //  禁止字体渲染breakPages: true, //  在分页符上启用分页ignoreLastRenderedPageBreak: true, //  禁用lastRenderedPageBreak元素的分页experimental: false, //  启用实验性功能（制表符停止计算）trimXmlDeclaration: true, //   如果为真，xml声明将在解析之前从xml文档中删除debug: false, //  启用额外的日志记录useBase64URL: true, // 如果为true，图片、字体等将被转换为base 64 URL，否则使用URL.createObjectURLuseMathMLPolyfill: false, //  包括用于 chrome、edge 等的 MathML polyfill。showChanges: false // 启用文档更改（插入/删除）的实验性呈现}renderAsync(blobData , refWord.value, null, options)}}</script>

预览效果

 

https://github.com/VolodymyrBaydalka/docxjshttps://github.com/VolodymyrBaydalka/docxjs