前端实现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 // 配置
);
本文来自博客园,作者:懒惰ing,转载请注明原文链接:https://www.cnblogs.com/landuo629/p/17030059.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
2021-01-06 proxy代理模式实现v-model双向绑定