想在vue中预览doxc,excel,pdf文件？ vue-office提供包支持

在浩瀚的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文件预览

TypeScript 复制代码

<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 文件预览

TypeScript 复制代码

<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 文件预览

TypeScript 复制代码

<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>