📖 Introduce

This project is dedicated to previewing any file format on the Vue3 framework, supporting file previews such as docx, xlsx, pptx, pdf, image, txt, epub, markdown, code, audio, video, msg, etc.

Project repository: https://github.com/VueFilesPreview/vue-files-preview

🚀 Features

• [x] Support CDN / ESM / CommonJS import
• [x] Preview docx files via vue-office
• [x] Preview xlsx / xls / csv and other spreadsheet formats via vue-office
• [x] Preview pptx / ppt presentation files via pptx-preview
• [x] Preview pdf files via native iframe
• [x] Preview 28+ code file types with syntax highlighting via codemirror
• [x] Preview markdown files via markdown-it
• [x] Preview epub e-books with page-flipping via epubjs
• [x] Preview images (jpg, png, webp, gif, bmp, svg, ico, etc.)
• [x] Preview audio files with waveform visualization
• [x] Preview video files (mp4, webm, mkv, avi, mov, etc.)
• [x] Preview msg (Outlook email) files via msgreader
• [x] Support File, Blob, and URL as input source
• [x] Support rendered and error event callbacks
• [x] Loading animation during file parsing
• [x] Friendly interface for unknown file types
• [x] Full TypeScript support with type declarations
• [x] Tree-shakable — import individual preview components on demand

📦 Install

From v1.0.0 version

It only works for Vue 3

# npm
npm i vue-files-preview
# yarn
yarn add vue-files-preview
# pnpm
pnpm i vue-files-preview

CDN

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-files-preview"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-files-preview/umd/style.css">

<div id="app">
  <vue-files-preview :url="fileUrl"></vue-files-preview>
</div>

<script>
  const { createApp, ref } = Vue
  const app = createApp({
    setup() {
      const fileUrl = ref('https://example.com/sample.pdf')
      return { fileUrl }
    }
  })
  app.use(VueFilesPreview)
  app.mount('#app')
</script>

Global Registration (main.ts)

import { createApp } from 'vue'
import VueFilesPreview from 'vue-files-preview'
import 'vue-files-preview/lib/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(VueFilesPreview)
app.mount('#app')

On-demand Import (Component)

<template>
  <!-- Auto-detect file type -->
  <VueFilesPreview :file="file" />
  <VueFilesPreview :url="url" />

  <!-- Or use a specific preview component -->
  <PdfPreview url="https://example.com/sample.pdf" />
</template>

<script setup>
import { VueFilesPreview, PdfPreview } from 'vue-files-preview'
</script>

📋 API

Props

VueFilesPreview (main component)

| Prop | Type | Default | Description | |------|------|---------|-------------| | file | File \| Blob | — | File or Blob object to preview | | url | string | — | URL of the file to preview | | name | string | — | File name (used for type detection when passing Blob) | | width | string | '100%' | Container width | | height | string | '100%' | Container height | | overflow | string | 'auto' | Container overflow behavior |

When both file and url are provided, file takes priority.

Individual Preview Components

All individual preview components (PdfPreview, DocxPreview, XlsxPreview, etc.) accept these common props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | file | File \| Blob | — | File or Blob object to preview | | url | string | — | URL of the file to preview | | name | string | — | File name hint |

Events

| Event | Payload | Description | |-------|---------|-------------| | rendered | — | Emitted when the file has been successfully rendered | | error | Error | Emitted when an error occurs during rendering |

Exported Components

| Component | Description | |-----------|-------------| | VueFilesPreview | Main component — auto-detects file type and renders the appropriate preview | | AudioPreview | Audio player with waveform visualization | | CodePreview | Code file preview with syntax highlighting | | DocxPreview | Word (.docx) document preview | | EpubPreview | EPUB e-book preview with page turning | | MdPreview | Markdown rendered preview | | MsgPreview | Outlook email (.msg) preview | | PdfPreview | PDF preview (iframe-based) | | PicPreview | Image preview | | TxtPreview | Plain text preview | | VideoPreview | Video player | | XlsxPreview | Spreadsheet (xlsx/xls/csv/ods...) preview |

🦄 Example

An interactive example application is included in the example/ directory. It demonstrates:

• File upload: Select a local file or drag-and-drop to preview
• URL preview: Enter a remote file URL to preview directly
• Sample files: Quick-access buttons for PDF, Markdown, Video, Audio, SVG, XML, JSON, PPTX, MSG, and more
• Blob support: Test Blob object preview (e.g. fetching a remote SVG as Blob)

Run the example locally

# Install dependencies
pnpm install
pnpm example:install

# Start the dev server
pnpm example

Online demo: https://vuefilespreview.github.io/vue-files-preview/

📁 Supported File Types

docx preview

Using Vue Office to preview Word documents.

Supported formats: docx

xlsx preview

Using Vue Office to preview spreadsheet files.

Supported formats: xlsx, xls, csv, fods, ods, ots, xlsm, xlt, xltm

pptx preview

Using pptx-preview to preview presentation files with responsive layout and all slides tiled vertically.

Supported formats: ppt, pptx, fodp, odp, otp, pot, potm, potx, pps, ppsm, ppsx, pptm

pdf preview

Using native iframe to render PDF files.

Supported formats: pdf

audio preview

Using native audio tag and canvas to implement the audio preview with waveform visualization.

Supported formats: mp3, wav, wma, ogg, aac, flac

video preview

Using native video tag to implement the video preview.

Supported formats: mp4, webm, ogg, mkv, avi, mpeg, flv, mov, wmv

image preview

Using native img tag to implement image preview.

Supported formats: jpg, png, jpeg, webp, gif, bmp, svg, ico

txt preview

Supported formats: txt

code preview

Using codemirror to provide syntax-highlighted code file preview.

Supported formats: html, css, less, scss, js, json, ts, vue, c, cpp, java, py, go, php, lua, rb, pl, swift, vb, cs, sh, rs, vim, log, lock, xml, mht, mhtml, mod

markdown preview

Using markdown-it with highlight.js for code block highlighting.

Supported formats: md

epub preview

Using epubjs to preview EPUB e-books with page-flipping support.

Supported formats: epub

msg preview

Using msgreader to preview Outlook email (.msg) files, displaying sender, recipients, subject, and body content.

Supported formats: msg

doc preview

doc format support is still pending. Files with the following extensions will display a friendly "unknown file" interface.

Recognized but not yet previewable: doc, docm, dot, dotm, dotx, fodt, odt, ott, rtf, djvu, xps

🤝 Contributors

🌸 Thanks

• pptx-preview
• vue-office
• codemirror
• markdown-it
• highlight.js
• epubjs
• msgreader
• vue-codemirror
• vueuse