admin管理员组文章数量:1649201
"pdfjs-dist": "^2.16.105",
<template>
<div class="pdf-wrap">
<div class="top">
<el-button type="text" @click="clickPre">上一页 </el-button
><span class="ml8 mr8">第{{ pageNo }} / {{ pdfPageNumber }}页</span
><el-button type="text" @click="clickNext"> 下一页</el-button>
<el-button type="text" @click="zoomIn">放大页面</el-button>
<el-button type="text" @click="zoomOut">缩小页面</el-button>
</div>
<div class="canvas-container" ref="pdfContainer"></div>
<div class="down">
<el-button type="text" @click="clickPre">上一页</el-button
><span class="ml8 mr8">第{{ pageNo }} / {{ pdfPageNumber }}页</span
><el-button type="text" @click="clickNext">下一页</el-button>
<el-button type="text" @click="zoomIn">放大页面</el-button>
<el-button type="text" @click="zoomOut">缩小页面</el-button>
</div>
</div>
</template>
<script>
const pdfJS = require('pdfjs-dist')
pdfJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
export default {
props: {
src: String
},
mounted() {
this.$nextTick(() => {
this.loadPDF('/static/pdf/中.pdf', 1)
})
},
data() {
return {
pageNo: null,
pdfPageNumber: null,
pdfTotalPages: 1,
renderingPage: false,
pdfData: null, // PDF的base64
scale: 1.3,
pdfUrl: '/static/pdf/中.pdf'
}
},
methods: {
async loadPDF(pdfUrl, num) {
this.renderingPage = true
this.pdfUrl = pdfUrl
const pdfContainer = this.$refs.pdfContainer
pdfContainer.innerHTML = ''
// 异步加载 PDF 文件
const pdf = await pdfJS.getDocument(pdfUrl).promise
this.pdfPageNumber = pdf.numPages //总页数
// 渲染 PDF 页面
const page = await pdf.getPage(num)
const viewport = page.getViewport({
scale: this.scale,
enableWebGL: true, // 启用 WebGL 渲染(如果支持)
imageSmoothingEnabled: true
})
// 创建 Canvas 元素并添加到容器中
const canvas = document.createElement('canvas')
canvas.className = 'pdf-page'
const context = canvas.getContext('2d')
canvas.height = viewport.height
canvas.width = viewport.width
pdfContainer.appendChild(canvas)
// 渲染 PDF 页面到 Canvas 上
await page.render({
canvasContext: context,
viewport: viewport
}).promise
this.renderingPage = false
this.pageNo = num //当前页
},
// 上一页
clickPre() {
if (!this.renderingPage && this.pageNo && this.pageNo > 1) {
this.loadPDF(this.pdfUrl, this.pageNo - 1)
}
},
// 下一页
clickNext() {
if (this.pageNo == this.pdfPageNumber) {
this.loadPDF(this.pdfUrl, 1)
return
}
if (!this.renderingPage && this.pdfPageNumber && this.pageNo && this.pageNo < this.pdfPageNumber) {
this.loadPDF(this.pdfUrl, this.pageNo + 1)
}
},
// 缩小页面
zoomOut() {
if (this.scale > 0.5) {
// 限制最小缩放比例
this.scale -= 0.1 // 减小缩放比例
this.loadPDF(this.pdfUrl, this.pageNo) // 重新加载 PDF 页面
}
},
// 放大页面
zoomIn() {
if (this.scale < 2) {
// 限制最大缩放比例
this.scale += 0.1 // 增加缩放比例
this.loadPDF(this.pdfUrl, this.pageNo) // 重新加载 PDF 页面
}
}
}
}
</script>
<style scoped>
.pdf-wrap {
display: flex;
flex-direction: column;
align-items: center;
border: 4px solid #ccc;
overflow: hidden;
}
.top {
flex: 0 0 auto;
}
.down {
flex: 0 0 auto;
}
.canvas-container {
border: 1px dashed #e1e1e1;
height: 800px;
overflow: auto;
}
canvas {
border: 1px dashed black;
margin-bottom: 10px;
}
.ml8 {
margin-left: 8px;
}
.mr8 {
margin-right: 8px;
}
</style>
版权声明:本文标题:pdf在线预览 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729504500a1203471.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论