File Preview Implementation in Vue3

This guide covers implementing preview functionality for common file types within a Vue 3 project.

Supported File Types

The implementation supports: docx, xlsx, pdf, txt, png, jpg, jpeg, mp4, and mp3.

Note: Legacy DOC format is not supported due to lack of reliable solutions. Only DOCX is covered.

1. DOCX Document Preview

Install Dependencies Using version 1.6.2:

npm i @vue-office/docx
# or
yarn add @vue-office/docx

Component Template

<template>
  <vue-office-docx
    :src="documentUrl"
    :style="previewStyles"
    @rendered="handleRendered"
    @error="handleError"
  />
</template>

Script Section

<script setup>
import { defineProps } from 'vue';
import VueOfficeDocx from '@vue-office/docx';
import '@vue-office/docx/lib/index.css';

const props = defineProps({
  documentUrl: {
    type: String,
    required: false,
    default: () => ''
  }
});

const previewStyles = {
  width: '100%',
  height: '100%'
};

const handleRendered = () => {
  console.log('Document rendered successfully');
};

const handleError = (error) => {
  console.error('Rendering failed:', error);
};
</script>

2. XLSX Document Preview

Install Dependencies Using version 1.7.8:

npm i @vue-office/excel
# or
yarn add @vue-office/excel

Comopnent Template

<template>
  <vue-office-excel
    :src="spreadsheetUrl"
    :style="previewStyles"
    @rendered="handleRendered"
    @error="handleError"
  />
</template>

Script Section

<script setup>
import { defineProps } from 'vue';
import VueOfficeExcel from '@vue-office/excel';
import '@vue-office/excel/lib/index.css';

const props = defineProps({
  spreadsheetUrl: {
    type: String,
    required: false,
    default: () => ''
  }
});

const previewStyles = {
  width: '100%',
  height: '100%'
};

const handleRendered = () => {
  console.log('Spreadsheet rendered successfully');
};

const handleError = (error) => {
  console.error('Rendering failed:', error);
};
</script>

3. PDF and TXT Preview

No additional dependencies required. Uses native iframe support for both formats.

Component Template

<template>
  <iframe
    :src="fileUrl"
    style="width: 100%; height: 600px; border: none;"
  />
</template>

Script Section

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  fileUrl: {
    type: String,
    required: false,
    default: () => ''
  }
});
</script>

4. Video Preview

Install Dependencies Using version 1.3.2:

npm i vue3-video-play
# or
yarn add vue3-video-play

Entry File Configuration

import { createApp } from 'vue';
import App from './App.vue';
import vue3videoPlay from 'vue3-video-play';
import 'vue3-video-play/dist/style.css';

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

Important Fix: Some versions have module path issues. To resolve runtime errorss, edit the dependency's package.json and change the 'module' field to "./dist/index.mjs".

Component Template

<template>
  <vue3-video-play
    width="100%"
    title="Sample Video"
    :src="videoUrl"
    :poster="videoOptions.poster"
    @play="onPlayHandler"
    @pause="onPauseHandler"
    @timeupdate="onTimeUpdateHandler"
    @canplay="onCanPlayHandler"
  />
</template>

Script Section

<script setup>
import { reactive, defineProps } from 'vue';

const props = defineProps({
  videoUrl: {
    type: String,
    required: false,
    default: () => ''
  }
});

const videoOptions = reactive({
  poster: ''
});

const onPlayHandler = (event) => {
  console.log('Video playing');
};

const onPauseHandler = (event) => {
  console.log('Video paused');
};

const onTimeUpdateHandler = (event) => {
  console.log('Time updated');
};

const onCanPlayHandler = (event) => {
  console.log('Ready to play');
};
</script>

5. Audio Preview

No external dependencies required. Uses native HTML5 audio element.

Component Template

<template>
  <audio
    controls
    controlsList="nodownload"
    style="width: 100%;"
  >
    <source
      :src="audioUrl"
      type="audio/mp3"
    />
    Your browser does not support the audio element.
  </audio>
</template>

Script Section

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  audioUrl: {
    type: String,
    required: false,
    default: () => ''
  }
});
</script>