文件预览

Vue 文件预览相关工具。

vue-pdf-embed

基本信息

• 简介: Vue 3 PDF 预览组件
• GitHub: https://github.com/hrynko/vue-pdf-embed
• npm: vue-pdf-embed

特点

• ✅ PDF 预览
• ✅ 分页显示
• ✅ 缩放控制
• ✅ 打印支持

安装

npm

npm install vue-pdf-embed

pnpm

pnpm add vue-pdf-embed

yarn

yarn add vue-pdf-embed

bun

bun add vue-pdf-embed

基础用法

<script setup lang="ts">
import VuePdfEmbed from 'vue-pdf-embed'

const pdfSource = '/sample.pdf'
</script>

<template>
  <VuePdfEmbed :source="pdfSource" />
</template>

---

@vue-office/docx

基本信息

• 简介: Vue Office 文档预览
• GitHub: https://github.com/501351981/vue-office
• npm: @vue-office/docx, @vue-office/excel, @vue-office/pdf

特点

• ✅ Word 预览 (.docx)
• ✅ Excel 预览 (.xlsx)
• ✅ PDF 预览
• ✅ Vue 3 支持

安装

npm

# Word 预览
npm install @vue-office/docx

# Excel 预览
npm install @vue-office/excel

# PDF 预览
npm install @vue-office/pdf

pnpm

# Word 预览
pnpm add @vue-office/docx

# Excel 预览
pnpm add @vue-office/excel

# PDF 预览
pnpm add @vue-office/pdf

yarn

# Word 预览
yarn add @vue-office/docx

# Excel 预览
yarn add @vue-office/excel

# PDF 预览
yarn add @vue-office/pdf

bun

# Word 预览
bun add @vue-office/docx

# Excel 预览
bun add @vue-office/excel

# PDF 预览
bun add @vue-office/pdf

Word 预览

<script setup lang="ts">
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

const docxSrc = '/sample.docx'
</script>

<template>
  <VueOfficeDocx :src="docxSrc" />
</template>

Excel 预览

<script setup lang="ts">
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'

const excelSrc = '/sample.xlsx'
</script>

<template>
  <VueOfficeExcel :src="excelSrc" />
</template>

---

v-viewer

基本信息

• 简介: Vue 图片查看器
• GitHub: https://github.com/mirari/v-viewer
• npm: v-viewer

特点

• ✅ 图片预览
• ✅ 缩放、旋转
• ✅ 幻灯片
• ✅ 键盘导航

安装

npm

npm install v-viewer viewerjs

pnpm

pnpm add v-viewer viewerjs

yarn

yarn add v-viewer viewerjs

bun

bun add v-viewer viewerjs

基础用法

<script setup lang="ts">
import { directive as viewer } from 'v-viewer'
import 'viewerjs/dist/viewer.css'

const images = [
  '/image1.jpg',
  '/image2.jpg',
  '/image3.jpg'
]
</script>

<template>
  <div v-viewer>
    <img v-for="src in images" :key="src" :src="src" />
  </div>
</template>

---

vue-advanced-cropper

基本信息

• 简介: Vue 图片裁剪组件
• 链接: https://advanced-cropper.github.io/vue-advanced-cropper/
• GitHub: https://github.com/advanced-cropper/vue-advanced-cropper

特点

• ✅ 高度可定制
• ✅ 移动端支持
• ✅ 多种裁剪模式
• ✅ TypeScript 支持

---

对比选择

工具	PDF	Word	Excel	图片	裁剪
vue-pdf-embed	✅	❌	❌	❌	❌
@vue-office	✅	✅	✅	❌	❌
v-viewer	❌	❌	❌	✅	❌
vue-advanced-cropper	❌	❌	❌	✅	✅

推荐组合

文档预览

• PDF: vue-pdf-embed 或 @vue-office/pdf
• Word: @vue-office/docx
• Excel: @vue-office/excel

图片处理

• 查看: v-viewer
• 裁剪: vue-advanced-cropper