优化pdf 加载逻辑
This commit is contained in:
parent
605110fa56
commit
4aa85dbf7b
|
|
@ -73,7 +73,7 @@ if (resolvedWorkerSrc) {
|
||||||
pdfjsLib.GlobalWorkerOptions.workerSrc = null
|
pdfjsLib.GlobalWorkerOptions.workerSrc = null
|
||||||
}
|
}
|
||||||
|
|
||||||
const DEFAULT_SCALE = 1.1
|
const DEFAULT_SCALE = 1
|
||||||
const DEFAULT_PDF_URL = 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/10/30/fe5b46ea37554516a71e7c0c486d3715.pdf'
|
const DEFAULT_PDF_URL = 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/10/30/fe5b46ea37554516a71e7c0c486d3715.pdf'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -268,6 +268,16 @@ export default {
|
||||||
this.isPrefetching = false
|
this.isPrefetching = false
|
||||||
this.initialPreloadedCount = 0
|
this.initialPreloadedCount = 0
|
||||||
|
|
||||||
|
// 预先获取第一页的 viewport,用于设置所有容器的初始尺寸
|
||||||
|
let defaultViewport = null
|
||||||
|
try {
|
||||||
|
const firstPage = await this.pdfDoc.getPage(1)
|
||||||
|
defaultViewport = firstPage.getViewport({ scale: this.scale })
|
||||||
|
this.pageCache.set(1, firstPage)
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('获取第一页 viewport 失败', error)
|
||||||
|
}
|
||||||
|
|
||||||
const fragment = document.createDocumentFragment()
|
const fragment = document.createDocumentFragment()
|
||||||
for (let pageNumber = 1; pageNumber <= this.totalPages; pageNumber += 1) {
|
for (let pageNumber = 1; pageNumber <= this.totalPages; pageNumber += 1) {
|
||||||
const placeholder = document.createElement('div')
|
const placeholder = document.createElement('div')
|
||||||
|
|
@ -276,10 +286,24 @@ export default {
|
||||||
placeholder.style.position = 'relative';
|
placeholder.style.position = 'relative';
|
||||||
placeholder.dataset.page = pageNumber
|
placeholder.dataset.page = pageNumber
|
||||||
placeholder.dataset.status = 'placeholder'
|
placeholder.dataset.status = 'placeholder'
|
||||||
|
|
||||||
|
// 如果获取到了默认 viewport,预先设置容器尺寸,避免滚动时修改
|
||||||
|
if (defaultViewport) {
|
||||||
|
placeholder.style.width = `${defaultViewport.width}px`
|
||||||
|
placeholder.style.height = `${defaultViewport.height}px`
|
||||||
|
placeholder.style.backgroundColor = '#fff'
|
||||||
|
}
|
||||||
|
|
||||||
fragment.appendChild(placeholder)
|
fragment.appendChild(placeholder)
|
||||||
this.pageContainers.push(placeholder)
|
this.pageContainers.push(placeholder)
|
||||||
}
|
}
|
||||||
container.appendChild(fragment)
|
container.appendChild(fragment)
|
||||||
|
|
||||||
|
// 设置 wrapper 的最小宽度
|
||||||
|
if (defaultViewport && this.$refs.pdfWrapper) {
|
||||||
|
this.$refs.pdfWrapper.style.minWidth = `${Math.ceil(defaultViewport.width)}px`
|
||||||
|
}
|
||||||
|
|
||||||
container.scrollTop = 0
|
container.scrollTop = 0
|
||||||
|
|
||||||
this.setupIntersectionObserver()
|
this.setupIntersectionObserver()
|
||||||
|
|
@ -289,11 +313,17 @@ export default {
|
||||||
this.isDocumentReady = true
|
this.isDocumentReady = true
|
||||||
},
|
},
|
||||||
|
|
||||||
ensureContainerDimensions(pageNumber, viewport) {
|
ensureContainerDimensions(pageNumber, viewport, force = false) {
|
||||||
const index = pageNumber - 1
|
const index = pageNumber - 1
|
||||||
const container = this.pageContainers[index]
|
const container = this.pageContainers[index]
|
||||||
if (!container) return
|
if (!container) return
|
||||||
|
|
||||||
|
// 如果容器已经有尺寸且不是强制更新,则跳过,避免滚动时修改尺寸导致滚动位置跳动
|
||||||
|
const hasDimensions = container.style.width && container.style.height && container.style.width !== '0px' && container.style.height !== '0px'
|
||||||
|
if (hasDimensions && !force && container.dataset.status !== 'placeholder') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
container.style.width = `${viewport.width}px`
|
container.style.width = `${viewport.width}px`
|
||||||
container.style.height = `${viewport.height}px`
|
container.style.height = `${viewport.height}px`
|
||||||
container.style.margin = '0px auto 10px'
|
container.style.margin = '0px auto 10px'
|
||||||
|
|
@ -330,7 +360,8 @@ export default {
|
||||||
if (!container) return null
|
if (!container) return null
|
||||||
|
|
||||||
const viewport = page.getViewport({ scale: this.scale })
|
const viewport = page.getViewport({ scale: this.scale })
|
||||||
this.ensureContainerDimensions(pageNumber, viewport)
|
// 渲染时允许更新尺寸(如果 viewport 与预设不同)
|
||||||
|
this.ensureContainerDimensions(pageNumber, viewport, true)
|
||||||
container.classList.add('is-loading')
|
container.classList.add('is-loading')
|
||||||
|
|
||||||
const oldCanvas = container.querySelector('.pdf-canvas')
|
const oldCanvas = container.querySelector('.pdf-canvas')
|
||||||
|
|
@ -497,8 +528,8 @@ export default {
|
||||||
try {
|
try {
|
||||||
const page = await this.pdfDoc.getPage(pageNumber)
|
const page = await this.pdfDoc.getPage(pageNumber)
|
||||||
this.pageCache.set(pageNumber, page)
|
this.pageCache.set(pageNumber, page)
|
||||||
const viewport = page.getViewport({ scale: this.scale })
|
// 预取时只缓存页面对象,不修改容器尺寸,避免滚动时影响滚动位置
|
||||||
this.ensureContainerDimensions(pageNumber, viewport)
|
// 容器尺寸会在实际渲染时通过 ensureContainerDimensions 设置
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.warn(`预取第 ${pageNumber} 页失败`, error)
|
console.warn(`预取第 ${pageNumber} 页失败`, error)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue