87,997
社区成员




<template>
<div class="pdf-wrapper">
<div class="pdf-container">
<div class="page-btn" @click="handleClickPdfPrev">
<img src="../../assets/images/prev.png" alt="">
</div>
<div class="pdf">
<div class="cav" ref="cavWrapper">
<canvas ref="cav" :id="id"></canvas>
</div>
</div>
<div class="page-btn" @click="handleClickPdfNext">
<img src="../../assets/images/next.png" alt="">
</div>
</div>
<loading v-if="!alivable" :text="pdfTipText"></loading>
<div class="pdf-footer">
<p v-if="alivable">{{pageNumber}} / {{total}}</p>
<p v-else>正在分页...</p>
</div>
</div>
</template>
<script>
import loading from './loading'
import PDFJS from 'pdfjs-dist'
import workerSrc from 'pdfjs-dist/build/pdf.worker.entry'
import { baseUrl } from "../../api/api";
export default {
name: 'pdfRead',
components: {
loading
},
props: {
id: {
type: [String, Number],
default: 'read1'
},
bookUrl: {
type: String
}
},
data(){
return {
alivable: false,
pdfTipText: 'PDF解析中...',
pageTipText: '正在生产分页...',
pageNumber: null,
total: null,
baseUrl
}
},
mounted(){
this._initPdf()
},
methods: {
// 下一页
handleClickPdfNext(){
if (this.alivable) {
this.pageNumber++
this.pageNumber = this.pageNumber > this.total ? this.total : this.pageNumber
this.renderPage(this.pageNumber)
}
},
// 上一页
handleClickPdfPrev(){
if (this.alivable) {
this.pageNumber--
this.pageNumber = this.pageNumber < 1 ? 1 : this.pageNumber
this.renderPage(this.pageNumber)
}
},
// 初始化PDF
_initPdf(){
PDFJS.workerSrc = workerSrc
PDFJS.getDocument(this.baseUrl + this.bookUrl).then(_pdfdoc => {
this.alivable = true
this.PDFDOC = _pdfdoc
this.total = this.PDFDOC.numPages
this.pageNumber = 1
this.renderPage(this.pageNumber)
}).catch(err => {
})
},
renderPage (num) {
if (this.alivable) {
this.ctx = this.$refs.cav.getContext('2d')
this.PDFDOC.getPage(num).then(page => {
const viewport = page.getViewport(1)
this.scale = this.$refs.cavWrapper.offsetHeight / viewport.height
const size = page.getViewport(this.scale)
this.$refs.cav.height = size.height
this.$refs.cav.width = size.width
const renderContext = {
canvasContext: this.ctx,
viewport: size
}
this.renderTask = page.render(renderContext)
})
}
}
}
}
</script>
这是我的vue源码 pdf.js 分页渲染的 仅供参考