vue实现预览功能
Vue 实现文件预览功能
图片预览
使用 <input type="file"> 结合 URL.createObjectURL() 实现本地图片预览：
<template>
<div>
<input type="file" @change="handleImagePreview" accept="image/*">
<img v-if="previewUrl" :src="previewUrl" width="200">
</div>
</template>
<script>
export default {
data() {
return {
previewUrl: ''
}
},
methods: {
handleImagePreview(e) {
const file = e.target.files[0]
if (file) {
this.previewUrl = URL.createObjectURL(file)
}
}
}
}
</script>PDF预览
通过 pdf.js 库实现PDF文件预览：
// 安装依赖
npm install pdfjs-dist
// 组件实现
<template>
<div>
<input type="file" @change="handlePdfPreview" accept="application/pdf">
<canvas ref="pdfCanvas"></canvas>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
methods: {
async handlePdfPreview(e) {
const file = e.target.files[0]
if (!file) return
const arrayBuffer = await file.arrayBuffer()
const pdf = await pdfjsLib.getDocument(arrayBuffer).promise
const page = await pdf.getPage(1)
const viewport = page.getViewport({ scale: 1.0 })
const canvas = this.$refs.pdfCanvas
const context = canvas.getContext('2d')
canvas.height = viewport.height
canvas.width = viewport.width
await page.render({
canvasContext: context,
viewport: viewport
}).promise
}
}
}
</script>Office文档预览
使用微软Office Online嵌入服务：
<template>
<iframe
:src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`"
width="100%"
height="500px"
frameborder="0"
></iframe>
</template>
<script>
export default {
props: ['fileUrl']
}
</script>视频/音频预览
HTML5原生媒体元素实现：
<template>
<div>
<input type="file" @change="handleMediaPreview" accept="video/*,audio/*">
<video v-if="isVideo" :src="previewUrl" controls width="400"></video>
<audio v-else-if="isAudio" :src="previewUrl" controls></audio>
</div>
</template>
<script>
export default {
data() {
return {
previewUrl: '',
isVideo: false,
isAudio: false
}
},
methods: {
handleMediaPreview(e) {
const file = e.target.files[0]
if (!file) return
this.previewUrl = URL.createObjectURL(file)
this.isVideo = file.type.includes('video')
this.isAudio = file.type.includes('audio')
}
}
}
</script>注意事项
- 使用
URL.revokeObjectURL()在组件销毁时释放内存 - 大文件需考虑分片读取或服务端预处理
- 敏感文件建议先上传至服务端再返回安全访问链接
- 跨域问题需配置CORS或使用代理
扩展方案
- 使用第三方库如
vue-file-preview实现多格式支持 - 服务端渲染方案适合保密性高的文档
- WebAssembly技术处理特殊格式文件
