|
@@ -1,8 +1,6 @@
|
|
|
<template>
|
|
|
<div class="pdf-view-example j-contanter">
|
|
|
- <div class="pdf-view-container j-main">
|
|
|
- <div id="pdf-container" />
|
|
|
- </div>
|
|
|
+ <div id="pdf-view-container" class="j-main" />
|
|
|
<div v-if="!getUserId" class="j-footer">
|
|
|
<a href="/jyapp/free/login?url=/jy_mobile/order/create/creditreport&activity=bidCreditReportPreview" class="adsense-container">
|
|
|
<AdSingle
|
|
@@ -32,7 +30,9 @@ export default {
|
|
|
return {
|
|
|
pdfUrl: '',
|
|
|
pdf: null,
|
|
|
- totalPages: 0
|
|
|
+ totalPages: 0,
|
|
|
+ currentPage: 1, // 新增
|
|
|
+ batchSize: 5 // 新增
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -49,7 +49,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- const container = document.getElementById('pdf-container')
|
|
|
+ const container = document.getElementById('pdf-view-container')
|
|
|
|
|
|
this.loadPdf(this.pdfUrl, container)
|
|
|
// 监听窗口的 resize 事件,实现自适应效果
|
|
@@ -67,43 +67,51 @@ export default {
|
|
|
})
|
|
|
this.pdf = await loadingTask.promise
|
|
|
this.totalPages = this.pdf.numPages
|
|
|
+ this.currentPage = 1
|
|
|
+ this.batchSize = 5 // 新增
|
|
|
|
|
|
- for (let pageNum = 1; pageNum <= this.totalPages; pageNum++) {
|
|
|
- const page = await this.pdf.getPage(pageNum)
|
|
|
- const viewport = page.getViewport({ scale: this.calculateScale(page) })
|
|
|
- const canvas = document.createElement('canvas')
|
|
|
- const ctx = canvas.getContext('2d')
|
|
|
- canvas.height = viewport.height
|
|
|
- canvas.width = viewport.width
|
|
|
- container.appendChild(canvas)
|
|
|
-
|
|
|
- await page.render({
|
|
|
- canvasContext: ctx,
|
|
|
- viewport,
|
|
|
- }).promise
|
|
|
- }
|
|
|
+ await this.loadBatchPages(container) // 新增
|
|
|
+ // 监听滚动事件
|
|
|
+ container.addEventListener('scroll', () => this.handleScroll(container))
|
|
|
}
|
|
|
catch (error) {
|
|
|
console.error('Error loading PDF:', error)
|
|
|
}
|
|
|
},
|
|
|
+ async loadBatchPages(container) {
|
|
|
+ // 加载当前页码开始的连续多页,这里以5页为例
|
|
|
+ // 分批加载,从当前页码开始,最多加载5页
|
|
|
+ const endPage = Math.min(this.currentPage + this.batchSize - 1, this.totalPages)
|
|
|
+ for (let pageNum = this.currentPage; pageNum <= endPage; pageNum++) {
|
|
|
+ const page = await this.pdf.getPage(pageNum)
|
|
|
+ const viewport = page.getViewport({ scale: this.calculateScale(page) })
|
|
|
+ const canvas = document.createElement('canvas')
|
|
|
+ const ctx = canvas.getContext('2d')
|
|
|
+ canvas.height = viewport.height
|
|
|
+ canvas.width = viewport.width
|
|
|
+ container.appendChild(canvas)
|
|
|
+
|
|
|
+ await page.render({
|
|
|
+ canvasContext: ctx,
|
|
|
+ viewport,
|
|
|
+ }).promise
|
|
|
+ }
|
|
|
+ this.currentPage = endPage + 1 // 更新当前页码
|
|
|
+ },
|
|
|
+ handleScroll(container) {
|
|
|
+ const { scrollTop, scrollHeight, clientHeight } = container
|
|
|
+ if (scrollTop + clientHeight >= scrollHeight - 100) { // 当滚动到底部附近时
|
|
|
+ if (this.currentPage <= this.totalPages) {
|
|
|
+ this.loadBatchPages(container)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
// 计算缩放比例以适应容器宽度
|
|
|
calculateScale(page) {
|
|
|
- const containerWidth = document.getElementById('pdf-container').clientWidth
|
|
|
+ const containerWidth = document.getElementById('pdf-view-container').clientWidth
|
|
|
const viewport = page.getViewport({ scale: 1 })
|
|
|
return containerWidth / viewport.width
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.pdf-container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- iframe {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|