vue 实现pdf查看
实现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是一个专门为Vue开发的PDF查看器组件。
安装：
npm install vue-pdf使用示例：
<template>
<pdf :src="pdfUrl"></pdf>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: { pdf },
data() {
return {
pdfUrl: '/path/to/document.pdf'
}
}
}
</script>使用iframe嵌入
简单直接的方法，适合不需要复杂交互的场景：
<template>
<iframe
:src="pdfUrl"
width="100%"
height="600px"
style="border: none;"
></iframe>
</template>
<script>
export default {
data() {
return {
pdfUrl: '/path/to/document.pdf'
}
}
}
</script>使用第三方服务
可以使用Google Docs Viewer等在线服务：
<template>
<iframe
:src="`https://docs.google.com/viewer?url=${encodeURIComponent(pdfUrl)}&embedded=true`"
width="100%"
height="600px"
frameborder="0"
></iframe>
</template>功能增强建议
- 添加分页控制功能
- 实现缩放功能
- 添加下载按钮
- 支持搜索文本
- 添加打印功能
根据项目需求选择合适的实现方式，对于简单需求iframe方案最快捷，需要更多功能则推荐使用PDF.js或vue-pdf组件。
