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
- Feat
CDN
support - Reconfiguration docx-preview
- Reconfiguration excel-preview
- Reconfiguration pdf-preview
- Support
Success
andError
callbacks - Friendly interface for unknown file
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
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')
⚠️ If you want import all preview component, you must be importVueFilePreview
like this!
<template>
<VueFilesPreview :file="file" />
<!-- or -- >
<vue-files-preview :file="file" />
</template>
<script >
import { VueFilesPreview } from 'vue-files-preview';
</script>
<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>
This demo is already here vue-files-preview-demo, click to view it.
Be pending
Using Vue Office to implement preview of doc, excel, and pdf files
use nature audio tag and canvas to implement the audio preview
use nature video tag to implement the video preview (just support mp4)
using native img tags to implement image 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
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
using epubjs to adapt to EPUB file preview and configure page-flipping function for secondary development