VUE3中实现word的预览功能

安装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

VUE3中实现word的预览功能相关推荐

Vue中实现pdf文件预览功能
写在前面: 实现的功能就是点击预览按钮,弹出对话框在线预览pdf文件实现此功能的前提是需要在Vue项目中安装组件vue-pdf, 在终端命令行输入运行如下语句: npm install --save ...
在你的网站、浏览器中集成3D模型预览功能，使用开源项目Online3DViewer
开源项目Online3DViewer # 通过url参数形式预览模型 https://3dviewer.net/#[3D模型URL] Online3DViewer 是一个免费.开源的web解决方案,可 ...
关于Java项目中，word和Excel类型文件的预览功能实现
关于Java项目中,word和Excel类型文件的预览功能实现背景 Aspose说明 Aspose.Words Aspose.Cells pom依赖引入引入license.xml(授权文件) 创建 ...
快速实现word、excel、ppt、txt等办公文件在线预览功能（Java版）
点击关注公众号,实用技术文章及时了解来源:blog.csdn.net/weixin_40986713/ article/details/109527294 java实现办公文件在线预览功能是一个大家 ...
Java 实现word、excel、ppt、txt等办公文件在线预览功能！
大家好,我是宝哥! 如何用 Java 实现word.excel.ppt.txt等办公文件在线预览功能?本文告诉你答案! java 实现办公文件在线预览功能是一个大家在工作中也许会遇到的需求,网上些公司 ...
手把手教你用 Java 实现word、excel、ppt、txt等办公文件在线预览功能！
如何用 Java 实现word.excel.ppt.txt等办公文件在线预览功能?本文告诉你答案! java 实现办公文件在线预览功能是一个大家在工作中也许会遇到的需求,网上些公司专门提供这样的服务, ...
前端【vue】实现文档在线预览功能，在线预览pdf、word、xls、ppt等office文件
前端江太公前端实现文档在线预览功能最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本.带参数文本.html文本.json文本.公 ...
百词斩英语单词小助手（主要实现英语单词学习的功能。用户可对词典文件中的单词进行预览，增删改查。同时还可进行中英、英中测试。本系统还提供了测试成绩的显示功能。）
struct word //单词的结构体 {char en[MAX_CHAR]; // 英文形式char ch[MAX_CHAR]; //中文形式 } s[MAX_NUM]; //单词数组 int n ...
office 文档在线预览功能实现(word,excel,pdf,ppt等多种格式)——使用https://view.xdocin.com/view 提示文档过期——基础积累
web实现office文档在线预览功能--基础积累最近遇到一个需求,就是要实现多种文档链接的在线预览,最简单的方式就是通过window.open(url地址)的方式来实现. 但是如果要求是在一个弹窗 ...

VUE3中实现word的预览功能

VUE3中实现word的预览功能相关推荐

最新文章

热门文章