使用vue预览Word文件

<template><!-- 浏览Word --><divref="wrap"class="client-tabl"><div v-if="headArr.length > 3" class="left"><!-- 侧边标题 --><ul class="collapse"><liv-for="(item, index) in sideArr":key="index"ref="menuLi":class="{ wirte: iswrite == index }"@click="menuClick(item, index)">{{ item }}</li></ul></div><!-- 渲染word文件 --><divid="wordView"v-loading="loading"element-loading-text="加载中"v-html="vHtml"/></div>
</template>

下载第三方插件并引用

// npm install --save mammoth
import mammoth from 'mammoth'

name: 'Word',data() {return {// 内容头部目录headArr: ['一、业财融合', '1.1 营业外包', '1.1.1外包商合同查询'],// 侧边目录sideArr: ['一、业财融合', '1.1 营业外包', '1.1.1外包商合同查询', '1.1.2外包费调账管理', '1.1.3汇总清单查询', '1.1.4汇总账单报账'],iswrite: 0, // 用于侧边栏排他思想timer: null, // 定时器名称loading: true, // 用于elementui 加载插件vHtml: '',wordURL: '/templates/新手介绍手册/附件2省侧财辅操作手册_营业外包分册20211026.docx' // 此地方存放文件的地址}},created() {this.previewWord()},methods: {// 渲染 word 文件内容previewWord() {var vm = thisconst xhr = new XMLHttpRequest()xhr.open('get', this.wordURL, true)xhr.responseType = 'arraybuffer'xhr.onload = function() {if (xhr.status === 200) {mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then(function(resultObject) {vm.$nextTick(() => {vm.vHtml = resultObject.valuevm.timers()})})}}xhr.send()},timers() {this.timer = setTimeout(() => {const inner = document.querySelectorAll('#wordView>h4')this.headArr.push(...inner)this.loading = false},)},// 此功能作用于 点击侧边栏 跳转到对应的内容头部标题menuClick(item, index) {this.iswrite = indexthis.headArr.forEach((iten) => {if (item === iten.innerHTML) {this.$refs.wrap.scrollTop = iten.offsetTop} if (item === iten) {this.$refs.wrap.scrollTop = iten.offsetTop}})},// 销毁定时器beforeDestroy() {clearInterval(this.timer)this.timer = null}

大致效果，希望能帮到小伙伴们！

使用vue预览Word文件相关推荐

vue 预览 word 文件 docx
安装 npm 依赖 npm i docx-preview@0.1.4 npm i jszip 预览在线地址文件 <template><div class="home&quo ...
vue预览word,excel,pptx,pdf文件
vue预览word,excel,pptx,pdf文件 1.做word,excel,pptx的预览,要先确定文件路径访问是通过域名的url来预览,不可以通过IP的url来访问先把文件路径的url进行u ...
Vue 预览word,excel,ppt等office文档-内网访问（基于onlyoffice，后端返回文件流）
Vue 预览word,excel等office 先看效果!! 需求背景:在前端页面中预览office文件且是内网访问,服务器不可访问外网的前提. 因此微软的接口就废掉了,因为他接口的条件是可以访问外网 ...
Vue预览word/pdf文件(内外网均可)
预览word文件实现方式有 1 将文件放在前端静态文件中实现本地预览但前端包变得很大多文件不适合 2 通过跳转外网链接访问但内网无法使用 3 综合考虑利用浏览器自带的预览pdf 将文件放在 ...
VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索，在iframe中获取选中文字，监听鼠标事件，右键菜单
一.VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索需求实现:vue实现预览pdf文件,获取到鼠标选中的文字数据.调用pdf.js自带的搜索方法实现搜索功能(后期可以调用该接口满足其他 ...
php怎么在线预览word文件？php预览.doc、.docx、.wps文件
php预览Word PHP要实现在线Word预览只需要3步第一步: 准备一个文件地址,如下: http://usdoc.cn/vw/文件模板.docx 第二步预览前置地址: http://vw.u ...
前端预览word文件_[装机必备] QuickLook —— 敲击空格即可快速预览文件
今天给大家推荐的软件是:QuickLook 你只需要选中文件,然后敲击空格,就可以快速预览文件内容 QuickLook 有三个版本:安装版.便携版.UWP 版作者对这三个版本的描述: *需要注意的 ...
vue 在线预览word文件docx
1.npm安装插件 npm i docx-preview 2.index.html文件引入 <script src="https://unpkg.com/jszip/dist/jszi ...
前端预览word文件_2020国开形考计算机练习题Word练习
选择 1.在Word文档中要设置"页边距",则应该使用 . "文件|打印"选项卡中的"页面设置"命令 2.若要在打印文档之前预览应使用的命令 ...

使用vue预览Word文件

使用vue预览Word文件相关推荐

最新文章

热门文章