vue实现pdf预览
vue实现pdf预览的方法
使用pdf.js库
在Vue项目中集成Mozilla的pdf.js库可以高效实现PDF预览功能。该方案无需后端支持，纯前端实现。
安装依赖：
npm install pdfjs-dist组件实现示例：
<template>
<div>
<canvas v-for="page in pages" :key="page" :id="'pdf-canvas-'+page"></canvas>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
data() {
return {
pdfDoc: null,
pages: 0
}
},
methods: {
async loadPDF(url) {
const loadingTask = pdfjsLib.getDocument(url)
this.pdfDoc = await loadingTask.promise
this.pages = this.pdfDoc.numPages
for(let i = 1; i <= this.pages; i++) {
const page = await this.pdfDoc.getPage(i)
const viewport = page.getViewport({ scale: 1.0 })
const canvas = document.getElementById(`pdf-canvas-${i}`)
const context = canvas.getContext('2d')
canvas.height = viewport.height
canvas.width = viewport.width
const renderContext = {
canvasContext: context,
viewport: viewport
}
page.render(renderContext)
}
}
},
mounted() {
this.loadPDF('/sample.pdf') // 替换为你的PDF路径
}
}
</script>使用vue-pdf组件
对于快速集成，可以使用现成的vue-pdf组件。
安装依赖：
npm install vue-pdf使用示例：
<template>
<pdf :src="pdfSrc" style="width: 100%"></pdf>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: { pdf },
data() {
return {
pdfSrc: '/sample.pdf' // 支持URL或base64格式
}
}
}
</script>使用iframe嵌入
简单场景下可以直接使用HTML5的iframe元素：
<template>
<iframe
src="/sample.pdf"
style="width:100%; height:800px;"
frameborder="0">
</iframe>
</template>使用第三方服务
对于需要更多功能的场景，可以考虑集成第三方PDF查看服务：
<template>
<div id="pdf-viewer"></div>
</template>
<script>
export default {
mounted() {
const script = document.createElement('script')
script.src = 'https://documentcloud.adobe.com/view-sdk/main.js'
script.onload = () => {
const viewerConfig = {
clientId: "YOUR_CLIENT_ID",
divId: "pdf-viewer"
}
window.AdobeDC.View.showPreviewFile(viewerConfig, {
content: { location: { url: "/sample.pdf" } },
metaData: { fileName: "Document.pdf" }
})
}
document.body.appendChild(script)
}
}
</script>注意事项
- 跨域问题：本地开发时需确保PDF文件路径正确，生产环境建议使用绝对URL
- 性能优化：大文件建议实现分页加载和缩放控制
- 移动端适配：需要额外处理触摸事件和响应式布局
- 安全考虑：用户上传的PDF文件应先进行病毒扫描
每种方案各有优劣，pdf.js提供最大灵活性但实现复杂，vue-pdf适合快速集成，iframe方案最简单但功能有限，第三方服务功能丰富但可能有费用产生。
