方法一：
使用微软的在线预览，使用iframe作为载体
<iframe frameborder="0" :src="'https://view.officeapps.live.com/op/view.aspx?src=' + fileUrl" width='100%'> </iframe>
方法二：
第三方服务接口地址：XDOC文档预览服务
// Url 为 .docx 格式的链接地址
<iframe :src="'https://view.xdocin.com/view?src='+Url" frameborder="0" style="" width='100%' height='100%'></iframe>
方法三：
使用插件支持内网
参考地址：vue-office: 支持word(.docx)、excel(.xlsx)、pdf等各类型office文件预览的vue组件集合，提供一站式office文件预览方案，支持vue2和3
npm install --save @vue-office/docx @vue-office/excel @vue-office/pdf vue-demi
<template>
<vue-office-docx :src="url" />
<vue-office-excel :src="url" />
<vue-office-pdf :src="url" />
</template>
<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import VueOfficePdf from '@vue-office/pdf'
export default {
components:{
VueOfficeDocx
},
data(){
return {
url: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
}
}
}
</script>