官網地址：https://github.com/501351981/vue-office?

支持多種文件(docx、excel、pdf、pptx)預覽的vue組件庫，支持vue2/3。也支持非Vue框架的預覽。

1.在線預覽word文件（以及本地上傳預覽）

????????1.1：下載組件庫

npm install @vue-office/docx vue-demi@0.14.6

? ? ? ? 1.2：頁面使用

<template><div><!-- 在線word預覽 --><!-- 本地文件上傳預覽 --><input type="file" @change="changeHandle" /><vue-office-docx :src="docx" class="wordOffce" @rendered="rendered" /></div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
//引入VueOfficeDocx組件
import VueOfficeDocx from '@vue-office/docx'
//引入相關樣式
import '@vue-office/docx/lib/index.css';let docx = ref<any>('http://static.shanhuxueyuan.com/test6.docx');
let rendered = () => {console.log("渲染完成")
}
// 本地文件上傳預覽
let changeHandle = (event: any) => {let file = event.target.files[0]let fileReader = new FileReader()fileReader.readAsArrayBuffer(file)fileReader.onload = () => {docx.value = fileReader.result;}
}
</script>
<style lang="less" scoped>
.wordOffce {height: 80vh !important;:deep(.docx-wrapper) {background-color: #fff !important;}
}
</style>

2.?在線預覽PDF文件（以及本地上傳預覽）

? ? ? ? ?2.1：下載組件庫

npm install @vue-office/pdf vue-demi@0.14.6

? ? ? ? 2.2：?頁面使用

<template><div><!-- 在線pdf預覽 --><!-- 本地文件上傳預覽 --><input type="file" @change="changeHandle" /><vue-office-pdf :src="pdf" class="wordOffce" @rendered="renderedHandler" @error="errorHandler" /></div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
//引入VueOfficeDocx組件
import VueOfficePdf from '@vue-office/pdf'let pdf = ref<any>('http://static.shanhuxueyuan.com/test.pdf');
let renderedHandler = () => {console.log("渲染完成")
}
let errorHandler = () => {console.log("渲染失敗")
}
// 本地文件上傳預覽
let changeHandle = (event: any) => {let file = event.target.files[0]let fileReader = new FileReader()fileReader.readAsArrayBuffer(file)fileReader.onload = () => {pdf.value = fileReader.result;}
}
</script>
<style lang="less" scoped>
.wordOffce {height: 80vh !important;box-shadow: 0px 0px 5px 27px rgba(0, 0, 0, 0.75);-webkit-box-shadow: 0px 0px 5px 27px rgba(0, 0, 0, 0.75);-moz-box-shadow: 0px 0px 5px 27px rgba(0, 0, 0, 0.75);:deep(.vue-office-pdf-wrapper) {background-color: #fff !important;}
}
</style>

3.?在線預覽Excel文件（以及本地上傳預覽）

? ? ? ? 3.1：下載組件庫

npm install @vue-office/excel vue-demi@0.14.6

? ? ? ? 3.2：頁面使用

<template><div><!-- 在線pdf預覽 --><!-- 本地文件上傳預覽 --><input type="file" @change="changeHandle" /><vue-office-excel :src="excel" class="wordOffce" @rendered="renderedHandler" @error="errorHandler" /></div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
//引入VueOfficeDocx組件
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'let excel = ref<any>('http://static.shanhuxueyuan.com/demo/excel.xlsx');
let renderedHandler = () => {console.log("渲染完成")
}
let errorHandler = () => {console.log("渲染失敗")
}
// 本地文件上傳預覽
let changeHandle = (event: any) => {let file = event.target.files[0]let fileReader = new FileReader()fileReader.readAsArrayBuffer(file)fileReader.onload = () => {excel.value = fileReader.result;}
}
</script>
<style lang="less" scoped>
.wordOffce {height: 80vh !important;
}
</style>

4.?在線預覽pptx文件（以及本地上傳預覽）

? ? ? ? 4.1：下載組件庫

npm install @vue-office/pptx vue-demi@0.14.6

????????4.2：頁面使用?

<template><div><!-- 在線pdf預覽 --><!-- 本地文件上傳預覽 --><input type="file" @change="changeHandle" /><vue-office-pptx :src="pptx" class="wordOffce" @rendered="renderedHandler" @error="errorHandler" /></div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
//引入VueOfficeDocx組件
import VueOfficePptx from '@vue-office/pptx'let pptx = ref<any>('http://static.shanhuxueyuan.com/test.pptx');
let renderedHandler = () => {console.log("渲染完成")
}
let errorHandler = () => {console.log("渲染失敗")
}
// 本地文件上傳預覽
let changeHandle = (event: any) => {let file = event.target.files[0]let fileReader = new FileReader()fileReader.readAsArrayBuffer(file)fileReader.onload = () => {pptx.value = fileReader.result;}
}
</script>
<style lang="less" scoped>
.wordOffce {height: 80vh !important;
}
</style>

?

????????