Vue-files-preview NPM

📖 Introduce

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

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

🚀 Features

Feat CDN support
Reconfiguration docx-preview
Reconfiguration excel-preview
Reconfiguration pdf-preview
Support Success and Error callbacks
Friendly interface for unknown file

📦 Install

From v1.0.0 version
It only works for Vue 3

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

In Main.js

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

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

In Component

⚠️ If you want import all preview component, you must be import VueFilePreview like this！

<template>
  <VueFilesPreview :file="file" />
  <!-- or -- >
  <vue-files-preview :file="file" />
</template>

<script >
  import { VueFilesPreview } from 'vue-files-preview';
</script>

🦄 Demo

Code

<template>
  <div class="main-container">
    <div v-if="uploadFile" class="preview-container">
      <VueFilesPreview :file="uploadFile" />
    </div>
    <div v-else class="upload-btn">
      <el-upload
        ref="uploadRef"
        drag
        action="null"
        :limit="1"
        :before-upload="beforeFileUpload"
      >
        <el-icon class="el-icon--upload"><i-ep-upload-filled /></el-icon>
        <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
      </el-upload>
    </div>
  </div>
</template>

<script lang="ts" setup>
const uploadRef = ref();
const uploadFile = ref();

const beforeFileUpload = (rawFile) => {
  uploadFile.value = rawFile;
  return false;
};
</script>

Page

测试默认界面

This demo is already here vue-files-preview-demo, click to view it.

doc、xls、ppt preview

Be pending

docx、xlsx、pdf preview

Using Vue Office to implement preview of doc, excel, and pdf files

audio、video preview

use nature audio tag and canvas to implement the audio preview

audio preview

use nature video tag to implement the video preview (just support mp4)

video preview

image preview

using native img tags to implement image preview

txt preview

code preview

using codemirror to adapt the code file preview, support Angular, CSS, C++, Go, HTML, Java, JavaScript, JSON, Liquid, Markdown, PHP, Python, Rust, Sass, Vue, XML, YAML, C#, CMake, CoffeeScript, Dart, Elixir, GLSL, Haskell, Lua, Objective-C, R, Ruby, Scala, Shell, Swift, TeX, TypeScript, Visual Basic code file preview