pdf 预览优化

This commit is contained in:
cwchen 2025-11-10 11:17:29 +08:00
parent c36ed499b6
commit 576f940531
1 changed files with 9 additions and 4 deletions

View File

@ -157,7 +157,6 @@ export default {
async renderAllPages() {
if (!this.pdfDoc) return
console.log('解析的pdf总数', this.pdfDoc.numPages)
const container = this.$refs.pdfWrapper
if (!container) return
container.innerHTML = ''
@ -204,7 +203,7 @@ export default {
const canvas = document.createElement('canvas')
canvas.className = 'pdf-canvas'
const deviceScale = window.devicePixelRatio || 1
const outputScale = Math.min(deviceScale, 1.5)
const outputScale = Math.min(deviceScale, 1)
canvas.width = viewport.width * outputScale
canvas.height = viewport.height * outputScale
canvas.style.width = `${viewport.width}px`
@ -259,13 +258,17 @@ export default {
},
scheduleRender(pageNumber, { priority = false } = {}) {
if (!pageNumber || this.renderedPages.has(pageNumber)) return
if (!pageNumber || pageNumber > this.totalPages || this.renderedPages.has(pageNumber)) return
if (this.renderQueue.includes(pageNumber)) return
if (priority) {
this.renderQueue.unshift(pageNumber)
} else {
this.renderQueue.push(pageNumber)
}
const MAX_QUEUE_LENGTH = 5
if (this.renderQueue.length > MAX_QUEUE_LENGTH) {
this.renderQueue.splice(MAX_QUEUE_LENGTH)
}
this.processRenderQueue()
},
@ -275,7 +278,9 @@ export default {
try {
while (this.renderQueue.length) {
const pageNumber = this.renderQueue.shift()
await new Promise((resolve) => requestAnimationFrame(resolve))
await this.renderSinglePage(pageNumber)
this.scheduleRender(pageNumber + 1)
}
} finally {
this.isProcessingQueue = false
@ -430,7 +435,7 @@ export default {
const options = {
root: this.$refs.pdfWrapper,
rootMargin: '400px 0px',
rootMargin: '120px 0px',
threshold: 0.01,
}