vue-files-preview

Vue Files Preview

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/SmallTeddy/vue-files-preview

📦 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 App from './App.vue'
import VueFilesPreview from 'vue-files-preview'
import 'vue-files-preview/dist/vue-files-preview.css'

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

In Component

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

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

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

Demo

Code

<template>
  <div class="main-container">
    <div v-if="uploadFile" class="preview-container">
      <vue-files-preview :upload-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"><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>
import { ref } from "vue";
import { ElUpload } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";

const uploadRef = ref();
const uploadFile = ref();

const beforeFileUpload = (rawFile) => {
  uploadFile.value = {
    name: rawFile.name,
    size: rawFile.size,
    status: "ready",
    uid: rawFile.uid,
    raw: 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

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

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

markdown preview

I have tried using both the marked and commonmark.js tool libraries for simple implementation, and ultimately adopted the markdown-it tool library

Currently, there may still be issues with formulas and other aspects, which will be further optimized in the future

epub preview

using epubjs to adapt to EPUB file preview and configure page-flipping function for secondary development