pdf预览

src/views/common/DocumentSearch.vue

@@ -61,7 +61,7 @@ if (resolvedWorkerSrc) {
     pdfjsLib.GlobalWorkerOptions.workerSrc = null
 }
 
-const DEFAULT_SCALE = 1
+const DEFAULT_SCALE = 0.95
 
 export default {
     name: 'DocumentSearch',
@@ -224,6 +224,9 @@ export default {
                 }
                 await page.render(renderContext).promise
 
+                this.pageTextDivs[index] = []
+
+                const scheduleTextLayer = () => {
                     const textLayerDiv = document.createElement('div')
                     textLayerDiv.className = 'textLayer'
                     textLayerDiv.style.width = `${viewport.width}px`
@@ -237,7 +240,8 @@ export default {
                         eventBus: this.eventBus,
                     })
 
-                const textContent = await page.getTextContent()
+                    page.getTextContent()
+                        .then((textContent) => {
                             textLayer.setTextContent(textContent)
                             textLayer.render()
 
@@ -246,6 +250,18 @@ export default {
                                 div.dataset.originalText = div.textContent
                             })
                             this.pageTextDivs[index] = textDivs
+                        })
+                        .catch((err) => {
+                            console.warn(`获取第 ${pageNumber} 页文本失败`, err)
+                        })
+                }
+
+                if (typeof window.requestIdleCallback === 'function') {
+                    window.requestIdleCallback(scheduleTextLayer, { timeout: 500 })
+                } else {
+                    setTimeout(scheduleTextLayer, 40)
+                }
+
                 this.renderedPages.set(pageNumber, { container, viewport })
                 if (this.observer) {
                     this.observer.unobserve(container)
@@ -265,7 +281,7 @@ export default {
             } else {
                 this.renderQueue.push(pageNumber)
             }
-            const MAX_QUEUE_LENGTH = 5
+            const MAX_QUEUE_LENGTH = 4
             if (this.renderQueue.length > MAX_QUEUE_LENGTH) {
                 this.renderQueue.splice(MAX_QUEUE_LENGTH)
             }
@@ -280,7 +296,6 @@ export default {
                     const pageNumber = this.renderQueue.shift()
                     await new Promise((resolve) => requestAnimationFrame(resolve))
                     await this.renderSinglePage(pageNumber)
-                    this.scheduleRender(pageNumber + 1)
                 }
             } finally {
                 this.isProcessingQueue = false
@@ -582,11 +597,15 @@ export default {
     top: 0;
     right: 0;
     bottom: 0;
-    pointer-events: none;
+    pointer-events: auto;
+    user-select: text;
+    -webkit-user-select: text;
 }
 
 .textLayer>span {
     cursor: text;
+    user-select: text;
+    -webkit-user-select: text;
 }
 
 .search-highlight {