在浩瀚的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-excelsrc="/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-docxsrc="/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-pdfsrc="/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>

?