vue之实现pdf预览
vue实现PDF预览的方法
在Vue项目中实现PDF预览功能，可以通过以下几种方式完成。每种方法适用于不同场景，可根据项目需求选择。
使用pdf.js库
pdf.js是Mozilla开源的PDF渲染库，无需依赖第三方服务，适合纯前端实现。
安装依赖：
npm install pdfjs-dist组件中使用：
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
props: ['pdfUrl'],
mounted() {
this.renderPDF()
},
methods: {
async renderPDF() {
const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
const pdf = await loadingTask.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
const renderContext = {
canvasContext: context,
viewport: viewport
}
page.render(renderContext)
}
}
}
</script>使用vue-pdf组件
vue-pdf是对pdf.js的封装，使用更简单。
安装依赖：
npm install vue-pdf组件中使用：
<template>
<pdf :src="pdfUrl" @num-pages="pageCount = $event" @page-loaded="currentPage = $event"></pdf>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: { pdf },
data() {
return {
pdfUrl: 'document.pdf',
pageCount: 0,
currentPage: 0
}
}
}
</script>使用iframe嵌入
最简单的方法，但样式和功能控制有限。
<template>
<iframe :src="pdfUrl" width="100%" height="600px"></iframe>
</template>
<script>
export default {
props: ['pdfUrl']
}
</script>使用Google Docs Viewer（需联网）
通过Google的在线服务渲染PDF，适合临时解决方案。
<template>
<iframe
:src="'https://docs.google.com/viewer?url=' + encodeURIComponent(pdfUrl) + '&embedded=true'"
width="100%"
height="600px">
</iframe>
</template>使用PDFObject库
PDFObject可以智能选择最佳渲染方式。
安装依赖：
npm install pdfobject组件中使用：
<template>
<div ref="pdfContainer"></div>
</template>
<script>
import PDFObject from 'pdfobject'
export default {
props: ['pdfUrl'],
mounted() {
PDFObject.embed(this.pdfUrl, this.$refs.pdfContainer)
}
}
</script>注意事项
- 本地开发时可能需要配置webpack处理PDF文件
- 大文件应考虑分页加载
- 移动端需考虑触摸事件和缩放功能
- 跨域问题需在服务端配置CORS
以上方法可根据项目需求选择，pdf.js提供最全面的功能但实现较复杂，vue-pdf简化了使用流程，iframe方案最简单但功能有限。
