在浩瀚的Vue生态中，vue-office犹如一颗璀璨的星辰，以其独特的魅力照亮了开发者处理多种文件格式的预览之路。这款精心打造的Vue组件库，不仅拥抱了Vue2的经典，也紧密跟随Vue3的步伐，展现了卓越的技术前瞻性和兼容性。它巧妙地集成了对DOCX、Excel、PDF等多种文件格式的支持，让文档预览在Web应用中变得前所未有的便捷与高效。
使用实例：轻盈如风，预览无界
想象一下，在您的Vue项目中，只需简单几行代码，即可将复杂的文档预览功能嵌入其中。无论是用户上传的简历、项目报告，还是财务报表，vue-office都能以优雅的方式呈现，让信息的传递与共享变得直观而流畅。无需担心文件格式的兼容性问题，vue-office以其强大的解析能力，确保每种文档都能精准还原，让用户享受如原生应用般的预览体验。
vue-office(git地址https://github.com/501351981/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/
vue3+Typescript格式
本地excel文件预览
<template>
<vue-office-excel
src="/assets/ComputerIT.pdf"
@rendered="renderedHandler"
@error="errorHandler"
class="excel-viewer"
/>
</template>
<script lang="ts" setup>
import VueOfficeExcel from '@vue-office/excel'
function renderedHandler() {
console.log("渲染完成");
}
function errorHandler() {
console.log("渲染失败");
}
</script>本地word 文件预览
<template>
<vue-office-docx
src="/assets/ComputerIT.pdf"
@rendered="renderedHandler"
@error="errorHandler"
class="docx-viewer"
/>
</template>
<script lang="ts" setup>
import VueOfficeDocx from '@vue-office/docx'
function renderedHandler() {
console.log("渲染完成");
}
function errorHandler() {
console.log("渲染失败");
}
</script>本地pdf 文件预览
<template>
<vue-office-pdf
src="/assets/ComputerIT.pdf"
@rendered="renderedHandler"
@error="errorHandler"
class="pdf-viewer"
/>
</template>
<script lang="ts" setup>
import VueOfficePdf from '@vue-office/pdf'
function renderedHandler() {
console.log("渲染完成");
}
function errorHandler() {
console.log("渲染失败");
}
</script>
