使用vue预览Word文件
<template><!-- 浏览Word --><divref="wrap"class="client-tabl"><div v-if="headArr.length > 3" class="left"><!-- 侧边标题 --><ul class="collapse"><liv-for="(item, in
·
<template>
<!-- 浏览Word -->
<div
ref="wrap"
class="client-tabl"
>
<div v-if="headArr.length > 3" class="left">
<!-- 侧边标题 -->
<ul class="collapse">
<li
v-for="(item, index) in sideArr"
:key="index"
ref="menuLi"
:class="{ wirte: iswrite == index }"
@click="menuClick(item, index)"
>
{{ item }}
</li>
</ul>
</div>
<!-- 渲染word文件 -->
<div
id="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 = this
const 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.value
vm.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 = index
this.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
}
大致效果,希望能帮到小伙伴们!
更多推荐
已为社区贡献3条内容
所有评论(0)