vue实现文档预览
Vue 实现文档预览的方法
使用 iframe 嵌入预览
在 Vue 中可以通过 iframe 直接嵌入文档链接实现预览。这种方式适用于 PDF、Word 等浏览器支持直接打开的文档类型。
<template>
<iframe
:src="`https://docs.google.com/viewer?url=${encodeURIComponent(fileUrl)}&embedded=true`"
width="100%"
height="600px"
frameborder="0"
></iframe>
</template>
<script>
export default {
data() {
return {
fileUrl: 'https://example.com/document.pdf'
}
}
}
</script>使用 PDF.js 预览 PDF
对于 PDF 文件，可以使用 Mozilla 开源的 PDF.js 库实现更灵活的预览功能。
安装依赖：
npm install pdfjs-dist组件实现：
<template>
<div>
<canvas v-for="page in pages" :key="page" :ref="`canvas-${page}`"></canvas>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
props: {
pdfUrl: String
},
data() {
return {
pages: [],
pdfDoc: null
}
},
methods: {
async loadPDF() {
const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
this.pdfDoc = await loadingTask.promise
this.pages = Array.from({length: this.pdfDoc.numPages}, (_, i) => i + 1)
this.$nextTick(() => {
this.renderPages()
})
},
async renderPages() {
for (const pageNum of this.pages) {
const page = await this.pdfDoc.getPage(pageNum)
const viewport = page.getViewport({scale: 1.0})
const canvas = this.$refs[`canvas-${pageNum}`][0]
const context = canvas.getContext('2d')
canvas.height = viewport.height
canvas.width = viewport.width
await page.render({
canvasContext: context,
viewport: viewport
}).promise
}
}
},
mounted() {
this.loadPDF()
}
}
</script>使用 Office 在线预览
对于 Office 文档（Word/Excel/PPT），可以使用微软的 Office 在线预览服务：
<template>
<iframe
:src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`"
width="100%"
height="600px"
frameborder="0"
></iframe>
</template>使用第三方库 vue-pdf
专门为 Vue 开发的 PDF 预览组件 vue-pdf 可以简化实现：
安装依赖：
npm install vue-pdf使用示例：
<template>
<pdf :src="pdfUrl" style="width: 100%"></pdf>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
},
data() {
return {
pdfUrl: '/document.pdf'
}
}
}
</script>图片文件预览
对于图片文件，可以直接使用 img 标签实现预览：
<template>
<img :src="imageUrl" alt="文档预览" style="max-width: 100%">
</template>注意事项
- 跨域问题：确保文档服务器配置了正确的 CORS 头信息
- 大文件处理：对于大文件应考虑分页加载或使用懒加载技术
- 移动端适配：针对移动设备需要调整预览区域大小和交互方式
- 错误处理：添加加载失败和错误状态的处理逻辑
