安装vue-office
docx文档预览组件
npm install @vue-office/docx vue-demi
excel文档预览组件
npm install @vue-office/excel vue-demi
pdf文档预览组件
npm install @vue-office/pdf vue-demi
如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
npm install @vue/composition-api
<template>
<div v-if="previewType">
<vue-office-docx :src="previewUrl" style="height: 100vh;" v-if="previewType== '.docx'" />
<vue-office-excel :src="previewUrl" style="height: 100vh;" v-else-if="previewType== '.xlsx'" />
<vue-office-pdf :src="previewUrl" v-else />
</div>
</template>
<script>
//引入VueOfficeDocx,VueOfficeExcel,VueOfficePdf组件
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'
export default {
components: {
VueOfficeDocx,
VueOfficeExcel,
VueOfficePdf
},
props: {
previewUrl: {
type: String,
default: ''
},
previewType: {
type: String,
default: ''
}
},
}
</script>
如安装依赖运行后,出现**.defineComponent is not a function
一般是通过CDN的方式加载了vue.js文件,且CDN中的vue版本和开发环境安装的vue版本不一致。
package.json中vue版本不是指定的固定版本,而是在版本前面带"^"或"~"符号,这里的含义是使用符合条件的新版本,而不是看到的这个版本。
{
"vue": "^2.6.10"
}
修改package.json中 vue 和 vue-template-compiler的版本,将版本前面的"^"或"~"符号去掉,具体版本号和CDN中的vue版本保持一致。
{
"vue": "2.6.10",
"vue-template-compiler": "2.6.10"
}
删除 package-lock.json 文件 和 node_modules中的全部包。
重新安装所有依赖,然后运行查看效果。