效果图:
**问题描述:**一般情况下使用iframe标签就可以实现文件预览,但是这个标签只针对于ppt和pdf是有效的。对于doc文件就需要借助第三方插件(@vue-office/docx)来实现预览了。下面介绍使用方法。
**安装插件:**npm install --save @vue-office/docx @vue-office/excel @vue-office/pdf vue-demi
我只需要vue-office/docx这个 所以只安装了这个 其他的大家根据自己的需要对安装命令进行删减即可。
我是封装起了一个预览文件的组件(fileView.vue),因为项目上需要调用预览的地方比较多。
fileView.vue代码
html
<template>
<el-dialog
class="global-window"
top="0"
title="预览"
status-icon
:visible="visible"
width="80%"
:close-on-click-modal="false"
:close-on-press-escape="false"
@close="close"
>
<div class="body">
<iframe v-show="showType === 'iframe'" src="" frameborder="0" id='iframe'></iframe>
<vue-office-docx
v-show="showType === 'doc'"
:src="docUrl"
style="height: 100vh;"
/>
</div>
</el-dialog>
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
export default {
components:{
VueOfficeDocx
},
data () {
return {
showType: '',
docUrl: '',
visible: false
}
},
methods: {
open (url) {
this.visible = true
this.$nextTick(() => {
this.showType = 'iframe'
if (url.indexOf('.pdf') > -1) {
let iframe = document.getElementById('iframe')
iframe.src = url + '#toolbar=0'
} else if (url.indexOf('.pptx') > -1) {
document.getElementById('iframe').src = `${window.location.origin}${window.location.pathname}pptx/index.html?src=${url}`
} else if (url.indexOf('.docx') > -1) {
this.showType = 'doc'
this.docUrl = url
} else {
document.getElementById('iframe').src = `https://view.officeapps.live.com/op/view.aspx?src=${url}`
}
})
},
close () {
this.visible = false
}
}
}
</script>
<style lang="less" scoped>
.global-window {
/deep/ .el-dialog {
height: 100%;
margin: 0 auto;
}
/deep/ .el-dialog__body {
height: calc(100% - 80px)
}
}
.body {
height: 100%;
iframe {
width: 100%;
height: 100%;
}
}
</style>
组件调用:
javascript
// 引入
import fileView from '@/components/fileView'
components: {
fileView
},
// 调用 (url就是文件的地址)
this.$refs.fileView.open(`${url}`)
**特别说明:**对于.pptx需要单独判断,因为iframe对于.ppt和.pptx的地址解析方式不太一样。(fileView.vue组件代码里都有呈现)另外需要注意的是.doc格式在@vue-office里是不支持的,它只能解析.docx的内容,并且也有一定的弊端,就是如果文件内有插画,会出现渲染不出来的情况,不过毕竟是免费的,就也不要求那么多了。如果愿意花钱找个第三方完整一点的,就也可以。不过也有其他方法,后台上传文件的时候限制只能.pptx格式或者.docx格式,毕竟我们团队就这么干的。简单粗暴,完美解决~ 还怒省一大笔钱~~