当前位置：首页 > news >正文

vue2/3 中使用 @vue-office/docx 在网页中预览(docx、excel、pdf)文件

news 来源：原创 2025/5/13 6:23:39

1. 安装依赖：

	`#docx文档预览组件`
	`npm install @vue-office/docx vue-demi@0.14.6`

	`#excel文档预览组件`
	`npm install @vue-office/excel vue-demi@0.14.6`

	`#pdf文档预览组件`
	`npm install @vue-office/pdf vue-demi@0.14.6`

vue2.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api

vue2中在components文件中写个组件

<template><div><vue-office-docx v-if="type == 'docx'" :src="`${matchType(src)}`" @rendered="rendered" /><vue-office-excel v-if="type == 'excel'" :src="`${matchType(src)}`" @rendered="rendered" /><vue-office-pdf v-if="type == 'pdf'" :src="`${matchType(src)}`" @rendered="rendered" /></div></template><script>
import VueOfficeDocx from '@vue-office/docx';
import VueOfficeExcel from '@vue-office/excel';
import VueOfficePdf from '@vue-office/pdf';
export default {components: {VueOfficeDocx,VueOfficeExcel,VueOfficePdf},props: {src: {type: String,required: true},},data() {return {type: docx}},methods: {matchType(fileName) {// 后缀获取var suffix = ''// 获取类型结果var result = ''try {var flieArr = fileName.split('.')suffix = flieArr[flieArr.length - 1]} catch (err) {suffix = ''} }}}
</script><style></style>

等数据接入再继续更新