之前使用的是mammoth.js,预览的时候会有一部分的样式缺失

使用docx-preview 能减少样式的缺失，该插件不能实现doc的文件预览，只能实现docx的文件预览

1、安装下载插件

npm i docx-preview --save

注意事项： 

1、使用过程中，docx-preview插件的版本问题，在vue2.6版本中，使用的docx-preview版本是0.1.20，所以使用以下版本，不然会报错提示，已经安装了插件，使用的时候提示需要安装插件，一直编译不成功

npm i docx-preview@0.1 --save

2、如果是低版本的浏览器，在项目启动的时候，会报错提示： 

解决的办法，在index.html中

<script>

if (typeof globalThis === 'undefined') {

globalThis = (function () {

// 根据当前环境选择合适的全局对象

if (typeof self !== 'undefined') { return self; }

if (typeof window !== 'undefined') { return window; }

if (typeof global !== 'undefined') { return global; }

this.globalThis || (this.globalThis = this)

throw new Error('unable to locate global object');

})();

}

</script>

2、引入

import { renderAsync } from 'docx-preview';

3、使用：

<div ref="docView" id="docView"></div>

 4、vue、或者js代码

fetch(url,{mode:'no-cors'})

.then((response) => response.blob())

.then((res)=>{

const reader = new FileReader()

reader.readAsArrayBuffer(res)

reader.onload = function(e){

let buffer = e.target.result

let bodyCon = document.getElementById('docView')

renderAsync(buffer,

bodyCon, // HTMLElement 渲染文档内容的元素,

null // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 //bodyCon

//如果有文档预览的默认样式，则设置options

).then((res)=>{

console.log(res)

})

}

})

5、还可以设置一些自定义的样式

docxOptions: {

className: "kaimo-docx-666", // string：默认和文档样式类的类名/前缀

inWrapper: true, // boolean：启用围绕文档内容的包装器渲染

ignoreWidth: true, // boolean：禁用页面的渲染宽度

ignoreHeight: false, // boolean：禁止渲染页面高度

ignoreFonts: true, // boolean：禁用字体渲染

breakPages: false, // boolean：在分页符上启用分页

ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页

experimental: false, // boolean：启用实验功能（制表符停止计算）

trimXmlDeclaration: true, // boolean：如果为true，解析前会从 xml 文档中移除 xml 声明

useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL

useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。

showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）

debug: false, // boolean：启用额外的日志记录

},

参考地址：docx-preview在vue内的使用_vue docx-preview-CSDN博客

6、style样式:

<style scoped>

.docx-container ::v-deep .docx-wrapper {

background-color: #fff;

padding: 20px;

}

.docx-container ::v-deep .docx-wrapper > section.docx {

width: 100% !important;

padding: 0rem !important;

min-height: auto !important;

box-shadow: none;

margin-bottom: 0;

}

.docx-container ::v-deep .docx-wrapper > section.docx::-webkit-scrollbar {

display: none;

}

</style>

/* 如果没有效果，可以设置/deep/*/

<style scoped>

/deep/.docx-wrapper {

background-color: #fff;

padding: 20px;

}

/deep/.docx-wrapper > section.docx {

width: 100% !important;

padding: 0rem !important;

min-height: auto !important;

box-shadow: none;

margin-bottom: 0;

}

/deep/.docx-wrapper > section.docx::-webkit-scrollbar {

display: none;

}

</style>

可以参考的网址：

https://blog.csdn.net/w1060436872/article/details/129125294 vue docx-preview实现docx文件在线预览

官网地址：docx-preview - npm