Vue vue-office+element-ui 预览docx、xlsx、pdf文件
在Vue中,我们可以使用一些第三方的插件或者组件来实现文件预览功能。比如,我们可以使用vue-office插件来预览PDF文件,文中所给的例子中使用了vue-office+element-ui。
1.安装element-ui
element-ui 快速开始可参考官网文档Element - 网站快速成型工具
2.安装vue-office
//docx文档预览组件
npm install @vue-office/docx
//excel文档预览组件
npm install @vue-office/excel
//pdf文档预览组件
npm install @vue-office/pdf
3.代码
index.vue代码
<template>
<div>
<el-button @click="FilePreviewDialogHandle('docx')">测试doc文件预览</el-button>
<el-button @click="FilePreviewDialogHandle('pdf')">测试pdf文件预览</el-button>
<el-button @click="FilePreviewDialogHandle('xlxs')">测试xlsx文件预览</el-button>
<FilePreviewDialog :file-url="fileUrl" :dialog-visible="this.openFilePreview" @closePreviewDialog="this.FilePreviewDialogHandle"></FilePreviewDialog>
</div>
</template>
<script>
import FilePreviewDialog from '@/components/FilePreviewDialog.vue'
import { ref } from 'vue'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'Index',
components: { FilePreviewDialog },
data () {
return {
openFilePreview: false,
fileUrl: null // 预览本地文件,文件放置与public文件夹下
}
},
methods: {
// 控制文件预览Dialog显示
FilePreviewDialogHandle (type) {
console.log(type)
this.openFilePreview = !this.openFilePreview
if (type === 'docx') {
this.fileUrl = ref('../file/test.docx') // 本地预览
} else if (type === 'pdf') {
this.fileUrl = 'http://static.shanhuxueyuan.com/test.pdf' // 线上获取
} else if (type === 'xlxs') {
this.fileUrl = 'http://static.shanhuxueyuan.com/demo/excel.xlsx'
} else if (type == null) {
this.fileUrl = null
} else {
this.fileUrl = null
}
}
}
}
</script>
FilePreviewDialog.vue代码
<template>
<el-dialog title="预览" :visible.sync="$props.dialogVisible" :before-close="handleClose" :modal="false" :close-on-click-modal="false">
<div v-if="getFileType(fileUrl) == 'docx'">
<vue-office-docx
:src="fileUrl"
style="height: 100vh;overflow: auto"
@rendered="rendered"
@error="errorHandler"
/>
</div>
<div v-if="getFileType(fileUrl) == 'xlsx'">
<vue-office-excel
:src="fileUrl"
style="height: 100vh;overflow: auto"
@rendered="rendered"
@error="errorHandler"
/>
</div>
<div v-if="getFileType(fileUrl) == 'pdf'">
<vue-office-pdf
:src="fileUrl"
style="height: 100vh;overflow: auto"
@rendered="rendered"
@error="errorHandler"
:options="{
width: '100%',
overflow: 'auto'
}"
/>
</div>
</el-dialog>
</template>
<script>
// 引入VueOffice组件
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 {
name: 'FilePreviewDialog',
components: {
VueOfficeDocx,
VueOfficeExcel,
VueOfficePdf
},
props: {
fileUrl: String, // 文件url
dialogVisible: { // 控制显示
type: Boolean,
default: false
}
},
methods: {
// 获取文件类型
getFileType (fileUrl) {
if (fileUrl !== '' && fileUrl != null && fileUrl !== undefined) {
const fileType = fileUrl.split('.').pop().toLowerCase() // 文件的扩展名(格式)
console.log('type:', fileType)
return fileType
} else {
return 'docx'
}
},
// 渲染结果
rendered () {
console.log('渲染完成')
},
errorHandler () {
this.$notify.error('加载失败')
},
// 关闭
handleClose (done) {
this.$confirm('确认关闭?')
.then(_ => {
this.$emit('closePreviewDialog', false)
})
.catch(_ => {})
}
}
}
</script>
注意事项
- 目前vue-office不支持doc格式。
- 需要确保数据格式正确,否则可能会出现转换错误的情况。