vue实现pdf预览
使用 vue-pdf 库实现 PDF 预览
安装 vue-pdf 库：
npm install vue-pdf在 Vue 组件中引入并使用：
<template>
<div>
<pdf :src="pdfUrl" style="width: 100%; height: 800px;"></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
},
data() {
return {
pdfUrl: '/path/to/your/file.pdf' // 可以是本地路径或远程URL
}
}
}
</script>使用 PDF.js 实现更灵活的预览
安装 pdfjs-dist：
npm install pdfjs-dist实现基础预览功能：
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
<div>
<button @click="prevPage">上一页</button>
<span>第 {{ pageNum }} 页 / 共 {{ pageCount }} 页</span>
<button @click="nextPage">下一页</button>
</div>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
data() {
return {
pdfDoc: null,
pageNum: 1,
pageCount: 0,
scale: 1.5
}
},
mounted() {
this.loadPDF('/path/to/your/file.pdf')
},
methods: {
async loadPDF(url) {
const loadingTask = pdfjsLib.getDocument(url)
this.pdfDoc = await loadingTask.promise
this.pageCount = this.pdfDoc.numPages
this.renderPage(this.pageNum)
},
async renderPage(num) {
const page = await this.pdfDoc.getPage(num)
const viewport = page.getViewport({ scale: this.scale })
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
},
prevPage() {
if (this.pageNum <= 1) return
this.pageNum--
this.renderPage(this.pageNum)
},
nextPage() {
if (this.pageNum >= this.pageCount) return
this.pageNum++
this.renderPage(this.pageNum)
}
}
}
</script>使用 iframe 实现简单预览
对于简单的需求，可以直接使用 iframe：
<template>
<iframe
:src="pdfUrl"
style="width: 100%; height: 800px;"
frameborder="0"
></iframe>
</template>
<script>
export default {
data() {
return {
pdfUrl: '/path/to/your/file.pdf'
}
}
}
</script>注意事项
PDF.js 需要设置跨域头才能加载远程 PDF 文件，如果遇到跨域问题，需要在服务器端设置：
Access-Control-Allow-Origin: *对于大文件 PDF，建议实现分页加载以提高性能。vue-pdf 也支持多页渲染，可以通过 v-for 循环渲染多个 pdf 组件。
PDF 文件路径可以是相对路径、绝对路径或完整的 URL 地址。对于本地开发，建议将 PDF 文件放在 public 目录下。
