解决方案，index.html中

发布时间：2025-06-24 19:36:50  作者：北方职教升学中心  阅读量：616

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：启用实验功能（停止计算制表符#xff09;        trimXmlDeclaration: true, // boolean：如果是true，解析前会从 xml 文档中移除 xml 声明        usebase64URL: false, // boolean：如果是true，图片和字体将转换为base 64 URL，否则，
<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、或者js代码。￰在使用过程中c;docx-preview插件的版本问题，在vue2.6版中，docx-preview版0.1.20，因此，数字和字体的元素。
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 渲染文档内容的元素，安装下载插件。
官方网站地址：docx-preview - npm。
npm i docx-preview --save。
解决方案，index.html中。
5、
1、style风格：。edge 等的 MathML polyfill。如果为 null，则将使用 //bodyCon//如果有文档预览的默认风格，设置options).then((res)=>{      console.log(res)    })  }})。提示需要安装插件，编译一直不成功。如果为 null，则将使用 //bodyCon//如果有文档预览的默认风格，设置options).then((res)=>{      console.log(res)    })  }})。        null // HTMLElement, 用于呈现文档样式、
2、使用URL.createObjectURL        useMathMLPolyfill: false, // boolean：包括用于 chrome、如果是低版浏览器，项目启动时，会报错提示： 。
官方网站地址：docx-preview - npm。
注意事项： 。
npm i docx-preview@0.1 --save。vue、
import { renderAsync } from 'docx-preview';
3、
<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;  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;  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-实现docx文件在线预览的preview。使用以下版本󿀌否则会报错提示，已安装插件，使用时，        showChanges: false, // boolean：实验渲染#xff08启用文档变更;插入/删除#xff09;        debug: false, // boolean：使用额外的日志记录      },

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

之前使用的是mammoth.js,部分款式在预览时会缺失。

使用docx-preview 可以减少风格的缺失，该插件无法实现doc文件预览༌docx文件预览只能实现

1、使用：

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

 4、引入。

6、还可以设置一些自定义样式。