vue 实现pdf查看
Vue 实现 PDF 查看的方法
使用 vue-pdf 库
vue-pdf 是一个基于 PDF.js 的 Vue 组件，适合在 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>使用 PDF.js 原生集成
PDF.js 是 Mozilla 开发的 PDF 渲染库，可以直接在 Vue 中使用。
安装依赖：
npm install pdfjs-dist示例代码：
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
mounted() {
this.renderPDF('/path/to/document.pdf')
},
methods: {
async renderPDF(url) {
const loadingTask = pdfjsLib.getDocument(url)
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
}
await page.render(renderContext).promise
}
}
}
</script>使用 iframe 嵌入
最简单的方法是通过 iframe 直接嵌入 PDF 文件。
<template>
<iframe
src="/path/to/document.pdf"
width="100%"
height="600px"
style="border: none;">
</iframe>
</template>使用第三方服务
对于在线 PDF 查看，可以考虑嵌入 Google Docs 查看器或其他 PDF 查看服务。
<template>
<iframe
src="https://docs.google.com/viewer?url=https://example.com/document.pdf&embedded=true"
width="100%"
height="600px"
style="border: none;">
</iframe>
</template>注意事项
- 本地开发时，确保 PDF 文件放在 public 目录或配置正确的静态资源路径
- 生产环境部署时注意跨域问题
- 大文件 PDF 需要考虑分页加载优化性能
- 移动端需要测试不同设备的兼容性
每种方法各有优缺点，vue-pdf 适合需要自定义样式的项目，iframe 方案最简单但功能有限，PDF.js 原生集成最灵活但实现复杂度最高。根据项目需求选择合适的方案。
