前端实现docx格式文件在线预览

docx的实现需要使用docx-preview插件

安装

npm i docx-preview

使用

html

<div ref="file"></div>

import { renderAsync } from "docx-preview";

const docxOptions = {
  className: "docx", //默认和文档样式类的类名/前缀
  inWrapper: true, //启用围绕文档内容呈现包装器
  ignoreWidth: false, //禁用页面的渲染宽度
  ignoreHeight: false, //禁用页面的渲染高度
  ignoreFonts: false, //禁用字体渲染
  breakPages: true, //在分页符上启用分页
  ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分页
  experimental: false, //启用实验功能（制表符停止计算）
  trimXmlDeclaration: true, //如果为true，则在解析之前将从xml文档中删除xml声明
  useBase64URL: false, //如果为true，图像、字体等将转换为base 64 URL，否则使用URL.createObjectURL
  useMathMLPolyfill: false, //包括用于铬、边等的MathML多填充。
  showChanges: false, //启用文档更改的实验渲染（插入/删除）
  debug: false, //启用额外的日志记录
};

renderAsync(
  Blob, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
  this.$refs.file, // HTMLElement 渲染文档内容的元素,
  null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
  docxOptions // 配置
);