@epxing/core 5.3.0-beta.1 → 5.3.0-beta.3

package/src/runtime-utils/pdf.viewer.js

@@ -1,644 +1,672 @@
-import util from '@epxing/core/src/runtime-utils/util'
-const DEFAULT_CACHE_SIZE = 10
-
-function binarySearchFirstItem (items, condition) {
-  var minIndex = 0
-  var maxIndex = items.length - 1
-
-  if (items.length === 0 || !condition(items[maxIndex])) {
-    return items.length
-  }
-
-  if (condition(items[minIndex])) {
-    return minIndex
-  }
-
-  while (minIndex < maxIndex) {
-    var currentIndex = minIndex + maxIndex >> 1
-    var currentItem = items[currentIndex]
-
-    if (condition(currentItem)) {
-      maxIndex = currentIndex
-    } else {
-      minIndex = currentIndex + 1
-    }
-  }
-
-  return minIndex
-}
-function backtrackBeforeAllVisibleElements (index, views, top) {
-  if (index < 2) {
-    return index
-  }
-
-  var elt = views[index].div
-  var pageTop = elt.offsetTop + elt.clientTop
-
-  if (pageTop >= top) {
-    elt = views[index - 1].div
-    pageTop = elt.offsetTop + elt.clientTop
-  }
-
-  for (var i = index - 2; i >= 0; --i) {
-    elt = views[i].div
-
-    if (elt.offsetTop + elt.clientTop + elt.clientHeight <= pageTop) {
-      break
-    }
-
-    index = i
-  }
-
-  return index
-}
-
-function getVisibleElements (scrollEl, views) {
-  var sortByVisibility = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false
-  var horizontal = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false
-  var top = scrollEl.scrollTop
-  var bottom = top + scrollEl.clientHeight
-  var left = scrollEl.scrollLeft
-  var right = left + scrollEl.clientWidth
-
-  function isElementBottomAfterViewTop (view) {
-    var element = view.div
-    var elementBottom = element.offsetTop + element.clientTop + element.clientHeight
-    return elementBottom > top
-  }
-
-  function isElementRightAfterViewLeft (view) {
-    var element = view.div
-    var elementRight = element.offsetLeft + element.clientLeft + element.clientWidth
-    return elementRight > left
-  }
-
-  var visible = []
-  var numViews = views.length
-  var firstVisibleElementInd = numViews === 0 ? 0 : binarySearchFirstItem(views, horizontal ? isElementRightAfterViewLeft : isElementBottomAfterViewTop)
-
-  if (firstVisibleElementInd > 0 && firstVisibleElementInd < numViews && !horizontal) {
-    firstVisibleElementInd = backtrackBeforeAllVisibleElements(firstVisibleElementInd, views, top)
-  }
-
-  var lastEdge = horizontal ? right : -1
-
-  for (var i = firstVisibleElementInd; i < numViews; i++) {
-    var view = views[i]
-    var element = view.div
-    var currentWidth = element.offsetLeft + element.clientLeft
-    var currentHeight = element.offsetTop + element.clientTop
-    var viewWidth = element.clientWidth
-    var viewHeight = element.clientHeight
-    var viewRight = currentWidth + viewWidth
-    var viewBottom = currentHeight + viewHeight
-
-    if (lastEdge === -1) {
-      if (viewBottom >= bottom) {
-        lastEdge = viewBottom
-      }
-    } else if ((horizontal ? currentWidth : currentHeight) > lastEdge) {
-      break
-    }
-
-    if (viewBottom <= top || currentHeight >= bottom || viewRight <= left || currentWidth >= right) {
-      continue
-    }
-
-    var hiddenHeight = Math.max(0, top - currentHeight) + Math.max(0, viewBottom - bottom)
-    var hiddenWidth = Math.max(0, left - currentWidth) + Math.max(0, viewRight - right)
-    var percent = (viewHeight - hiddenHeight) * (viewWidth - hiddenWidth) * 100 / viewHeight / viewWidth | 0
-    visible.push({
-      id: view.id,
-      x: currentWidth,
-      y: currentHeight,
-      view: view,
-      percent: percent
-    })
-  }
-
-  var first = visible[0]
-  var last = visible[visible.length - 1]
-
-  if (sortByVisibility) {
-    visible.sort(function (a, b) {
-      var pc = a.percent - b.percent
-
-      if (Math.abs(pc) > 0.001) {
-        return -pc
-      }
-
-      return a.id - b.id
-    })
-  }
-
-  return {
-    first: first,
-    last: last,
-    views: visible
-  }
-}
-function watchScroll (viewAreaElement, callback) {
-  var debounceScroll = function debounceScroll (evt) {
-    if (rAF) {
-      return
-    }
-
-    rAF = window.requestAnimationFrame(function viewAreaElementScrolled () {
-      rAF = null
-      var currentX = viewAreaElement.scrollLeft
-      var lastX = state.lastX
-
-      if (currentX !== lastX) {
-        state.right = currentX > lastX
-      }
-
-      state.lastX = currentX
-      var currentY = viewAreaElement.scrollTop
-      var lastY = state.lastY
-
-      if (currentY !== lastY) {
-        state.down = currentY > lastY
-      }
-
-      state.lastY = currentY
-      callback(state)
-    })
-  }
-
-  var state = {
-    right: true,
-    down: true,
-    lastX: viewAreaElement.scrollLeft,
-    lastY: viewAreaElement.scrollTop,
-    _eventHandler: debounceScroll
-  }
-  var rAF = null
-  viewAreaElement.addEventListener('scroll', debounceScroll, true)
-  return state
-}
-
-class PdfViewer {
-  constructor () {
-    this.pages = []
-    this.loadViews = []
-    this.searchText = ''
-    this.searchTextArr = []
-    this.scrollState = null
-    this.destroyed = false
-  }
-
-  // 页面 div 是 append 进容器的，实例不销毁就会跟下一份预览叠在一起；
-  // scroll 监听和 ResizeObserver 也得一并摘掉，否则每预览一次多留一份。
-  destroy () {
-    this.destroyed = true
-    const container = this.pdfConfig && this.pdfConfig.viewerContainer
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect()
-      this.resizeObserver = null
-    }
-    if (container && this.scrollState && this.scrollState._eventHandler) {
-      container.removeEventListener('scroll', this.scrollState._eventHandler, true)
-    }
-    this.scrollState = null
-    // 只摘自己建的页面节点，容器里可能还有调用方渲染的工具条
-    for (const item of this.pages) {
-      if (item.div && item.div.parentNode) item.div.parentNode.removeChild(item.div)
-    }
-    this.pages = []
-    this.loadViews = []
-    this.searchTextArr = []
-    if (this.pdfDocument) {
-      try {
-        this.pdfDocument.destroy()
-      } catch (e) {
-        // 文档还没加载完就 destroy，pdf.js 会抛，忽略
-      }
-      this.pdfDocument = null
-    }
-  }
-
-  async searchTextInPDF (searchText) {
-    const numPages = this.pdfDocument.numPages
-    let currentPage = 1
-    this.clearHighlights()
-    this.searchTextArr = []
-    if (!searchText) return
-    this.searchText = searchText
-    const searchPage = async (pageNum) => {
-      try {
-        const page = await this.pdfDocument.getPage(pageNum)
-        const initViewport = page.getViewport({ scale: 1 })
-        let scale = 1
-        if (this.pdfConfig.zoom === 'page-width') {
-          const num = this.pdfConfig.viewerContainer.offsetWidth / initViewport.width
-          scale = num
-          // scale = Math.round(this.pdfConfig.viewerContainer.offsetWidth / initViewport.width)
-        } else {
-          scale = this.pdfConfig.zoom
-        }
-        const viewport = page.getViewport({ scale: 1 })
-        const textContent = await page.getTextContent()
-
-        const textItems = textContent.items
-        for (let i = 0; i < textItems.length; i++) {
-          const textItem = textItems[i]
-          const text = textItem.str
-
-          // 查找搜索文字在当前文本项中的位置
-          let startIndex = text.indexOf(searchText)
-          while (startIndex !== -1) {
-            // 找到匹配的搜索文字
-            const endIndex = startIndex + searchText.length
-            // 计算搜索文字的边界框
-            const { x, y, width, height } = this.calculateTextBoundingBox(textItem, startIndex, endIndex, viewport, scale)
-
-            this.searchTextArr.push({
-              pageNum,
-              x: x * scale,
-              y: y * scale,
-              width: width * scale,
-              height: height * scale
-            })
-            // this.searchTextArr.push({
-            //   pageNum,
-            //   x,
-            //   y,
-            //   width,
-            //   height
-            // })
-
-            // 继续查找下一个匹配
-            startIndex = text.indexOf(searchText, endIndex)
-          }
-        }
-      } catch (error) {
-        console.error('Error processing page:', error)
-      }
-    }
-
-    // 使用for循环替代递归实现同步执行
-    for (currentPage = 1; currentPage <= numPages; currentPage++) {
-      await searchPage(currentPage)
-    }
-    if (this.searchTextArr.length > 0) {
-      this.scrollToPage(this.searchTextArr[0])
-    }
-  }
-
-  calculateTextBoundingBox (textItem, startIndex, endIndex, viewport, currentScale) {
-    const transform = textItem.transform
-    const textWidth = textItem.width
-    const textHeight = textItem.height
-
-    // 计算搜索文字的起始位置
-    const startX = transform[4] + (startIndex / textItem.str.length) * textWidth
-    const startY = viewport.height - transform[5]
-
-    // 计算搜索文字的宽度
-    const highlightWidth = ((endIndex - startIndex) / textItem.str.length) * textWidth
-
-    // return {
-    //   x: startX * currentScale, // 乘以当前缩放比例
-    //   y: (startY - textHeight) * currentScale, // 乘以当前缩放比例
-    //   width: highlightWidth * currentScale, // 乘以当前缩放比例
-    //   height: textHeight * currentScale // 乘以当前缩放比例
-    // }
-    return {
-      x: startX,
-      y: startY - textHeight, // PDF 的 y 坐标是倒置的
-      width: highlightWidth,
-      height: textHeight
-    }
-  }
-
-  highlightText (pageNum, x, y, width, height) {
-    const viewer = this.pdfConfig.viewerContainer
-    const pageElement = viewer.querySelector(`.pdf-viewer-page[data-page-number="${pageNum}"]`)
-
-    if (pageElement) {
-      const highlight = document.createElement('div')
-      highlight.className = 'search-highlight' // 添加类名
-      highlight.style.position = 'absolute'
-      highlight.style.left = `${x}px`
-      highlight.style.top = `${y}px`
-      highlight.style.width = `${width}px`
-      highlight.style.height = `${height}px`
-      highlight.style.backgroundColor = 'rgba(255, 255, 0, 0.5)'
-      highlight.style.pointerEvents = 'none'
-
-      pageElement.appendChild(highlight)
-    }
-  }
-
-  clearHighlights () {
-    const highlights = document.querySelectorAll('.search-highlight')
-    highlights.forEach(highlight => {
-      highlight.remove() // 移除高亮元素
-    })
-  }
-
-  scrollToPage ({ pageNum, x, y, width, height }) {
-    this.clearHighlights()
-    const scrollY = y > 60 ? y - 60 : y
-    // 来显示 PDF 页面的容器
-    const viewer = this.pdfConfig.viewerContainer
-    const pageElement = viewer.querySelector(`.pdf-viewer-page[data-page-number="${pageNum}"]`)
-    if (pageElement) {
-      viewer.scrollTo({
-        top: pageElement.offsetTop + scrollY, // 计算滚动位置
-        behavior: 'smooth' // 平滑滚动
-      })
-      // 高亮显示
-      this.highlightText(pageNum, x, y, width, height)
-    }
-  }
-
-  loadPdf () {
-    return util.usePlugin('pdf').then(pdf => {
-      this.pdfJs = pdf
-    })
-  }
-
-  async run (config) {
-    // 加载pdf
-    this.pdfConfig = {
-      viewerContainer: config.container,
-      url: config.url,
-      cMapUrl: config.cMapUrl || (util.getPublicPath() === './' ? './cmaps/' : util.getPublicPath() + 'cmaps/'),
-      cMapPacked: config.cMapPacked !== null ? config.cMapPacked : true,
-      zoom: config.zoom || 'page-width',
-      pageRotate: 0
-    }
-    await this.loadPdf()
-    return this.pdfJs.getDocument({
-      url: this.pdfConfig.url,
-      cMapUrl: this.pdfConfig.cMapUrl,
-      cMapPacked: this.pdfConfig.cMapPacked
-    }).promise.then((pdfDocument) => {
-      this.load(pdfDocument)
-    })
-  }
-
-  load (pdfDocument) {
-    // 文档还在下载时实例已被销毁（快速切换预览），这份结果直接丢掉，不能再往容器里塞页面
-    if (this.destroyed) {
-      try {
-        pdfDocument.destroy()
-      } catch (e) {
-        // ignore
-      }
-      return
-    }
-    this.pdfDocument = pdfDocument
-    this.pdfDocument.getPage(1).then((firstPage) => {
-      if (this.destroyed) return
-      const pagesCount = pdfDocument.numPages
-      const viewport = firstPage.getViewport({
-        scale: 1
-      })
-      for (let pageNum = 1; pageNum <= pagesCount; ++pageNum) {
-        this.createPageView({
-          container: this.pdfConfig.viewerContainer,
-          id: pageNum,
-          viewport: viewport.clone()
-        })
-      }
-      this.scrollState = watchScroll(this.pdfConfig.viewerContainer, this.scrollUpdate.bind(this))
-      setTimeout(() => {
-        if (this.destroyed) return
-        this.scrollUpdate()
-        this.resizeObserver = new ResizeObserver((entries) => {
-          this.resetPageStyle()
-        })
-        this.resizeObserver.observe(this.pdfConfig.viewerContainer)
-      }, 10)
-    })
-  }
-
-  createPageView ({ container, id }) {
-    this.pdfDocument.getPage(id).then((page) => {
-      if (this.destroyed) return
-      const viewport = page.getViewport({
-        scale: 1
-      })
-      const pageWidth = viewport.width
-      const pageHeight = viewport.height
-      const pageRatio = pageWidth / pageHeight
-      const canvasWidth = container.offsetWidth
-      const canvasHeight = canvasWidth / pageRatio | 0
-      const div = document.createElement('div')
-      div.className = 'pdf-viewer-page'
-      div.style.width = Math.floor(canvasWidth) + 'px'
-      div.style.height = Math.floor(canvasHeight) + 'px'
-      div.setAttribute('data-page-number', id)
-      const loading = document.createElement('div')
-      loading.className = 'el-icon-loading pdf-viewer-loading'
-      div.appendChild(loading)
-      container.appendChild(div)
-      this.pages.push({ id, div: div, viewport })
-      this.viewport = viewport
-    })
-  }
-
-  resetPageStyle () {
-    for (const item of this.pages) {
-      if (item.div) {
-        const viewport = item.viewport || this.viewport
-        const pageWidth = viewport.width
-        const pageHeight = viewport.height
-        const pageRatio = pageWidth / pageHeight
-        const canvasWidth = this.pdfConfig.zoom === 'page-width' ? this.pdfConfig.viewerContainer.offsetWidth : viewport.width * (this.pdfConfig.zoom || 1)
-        const canvasHeight = canvasWidth / pageRatio | 0
-        item.div.style.width = Math.floor(canvasWidth) + 'px'
-        item.div.style.height = Math.floor(canvasHeight) + 'px'
-      }
-    }
-  }
-
-  updatePageView () {
-    var visible = this.getVisiblePages()
-    var visiblePages = visible.views
-    var numVisiblePages = visiblePages.length
-    if (numVisiblePages === 0) {
-      return
-    }
-    this.resetPageStyle()
-    var newCacheSize = Math.max(DEFAULT_CACHE_SIZE, 2 * numVisiblePages + 1)
-    this.resizeVisiblePages(newCacheSize, visiblePages)
-    for (const item of this.loadViews) {
-      this.destroyPageView(item)
-    }
-    this.loadViews = []
-    this.renderPageView(visible, () => {
-      setTimeout(() => {
-        const page = visiblePages[0].view.div
-        this.pdfConfig.viewerContainer.scrollTop = page.offsetTop
-      }, 100)
-    })
-  }
-
-  scrollUpdate () {
-    var visible = this.getVisiblePages()
-    var visiblePages = visible.views
-    var numVisiblePages = visiblePages.length
-
-    if (numVisiblePages === 0) {
-      return
-    }
-
-    var newCacheSize = Math.max(DEFAULT_CACHE_SIZE, 2 * numVisiblePages + 1)
-
-    this.resizeVisiblePages(newCacheSize, visiblePages)
-    this.renderPageView(visible)
-  }
-
-  getVisiblePages () {
-    return getVisibleElements(this.pdfConfig.viewerContainer, this.pages)
-  }
-
-  resizeVisiblePages (newCacheSize) {
-    if (this.loadViews.length > newCacheSize) {
-      this.destroyPageView(this.loadViews.shift())
-    }
-  }
-
-  destroyPageView ({ id }) {
-    const page = this.pages.find(item => item.id === id)
-    const div = page.div
-    var childNodes = div.childNodes
-    for (var i = childNodes.length - 1; i >= 0; i--) {
-      var node = childNodes[i]
-      if (node.className.includes('pdf-viewer-loading')) {
-        node.style.display = 'block'
-      } else {
-        div.removeChild(node)
-      }
-    }
-    div.removeAttribute('data-loaded')
-  }
-
-  renderPageView (visible, cb) {
-    for (const item of visible.views) {
-      const div = item.view.div
-      if (div.getAttribute('data-loaded')) continue
-      div.setAttribute('data-loaded', true)
-      this.pdfDocument.getPage(item.view.id)
-        .then((page) => {
-          const canvas = document.createElement('canvas')
-          const ctx = canvas.getContext('2d', {
-            alpha: false
-          })
-          const initViewport = page.getViewport({ scale: 1 })
-          let scale = 1
-          if (this.pdfConfig.zoom === 'page-width') {
-            scale = Math.ceil(document.body.offsetWidth / initViewport.width)
-          } else {
-            scale = this.pdfConfig.zoom
-          }
-          const rotation = (this.pdfConfig.pageRotate + initViewport.rotation) % 360
-          const viewport = page.getViewport({ scale, rotation })
-          canvas.width = viewport.width // 画布大小,默认值是width:300px,height:150px
-          canvas.height = viewport.height
-          canvas.style.width = '100%' // 画布的框架大小
-          const renderContext = {
-            canvasContext: ctx,
-            viewport: viewport,
-            enableWebGL: false,
-            renderInteractiveForms: false
-          }
-          var renderTask = page.render(renderContext)
-          renderTask.promise.then(() => {
-            const loading = item.view.div.querySelector('.pdf-viewer-loading')
-            loading.style.display = 'none'
-            item.view.div.appendChild(canvas)
-            this.loadViews.push(item.view)
-            cb && cb()
-          })
-        })
-    }
-  }
-
-  drawerCanvas (num) {
-    return new Promise(resolve => {
-      this.pdfDocument.getPage(num)
-        .then(pdfPage => {
-          var canvas = document.createElement('canvas')
-          const ctx = canvas.getContext('2d')
-          const initViewport = this.viewport
-          const scale = Math.ceil(document.body.offsetWidth / initViewport.width)
-
-          const viewport = pdfPage.getViewport({ scale: scale })
-          canvas.width = viewport.width // 画布大小,默认值是width:300px,height:150px
-          canvas.height = viewport.height
-          canvas.style.width = '100%' // 画布的框架大小
-          const renderContext = {
-            canvasContext: ctx,
-            viewport: viewport,
-            enableWebGL: false,
-            renderInteractiveForms: false
-          }
-          var renderTask = pdfPage.render(renderContext)
-          renderTask.promise.then(() => {
-            resolve(canvas)
-          })
-        })
-    })
-  }
-
-  scaleChanged (scale) {
-    this.pdfConfig.zoom = scale
-    this.updatePageView()
-  }
-
-  rotateChanged (delta) {
-    this.pdfConfig.pageRotate += delta
-    const rotation = this.pdfConfig.pageRotate % 360
-    this.pdfDocument.getPage(1).then((firstPage) => {
-      this.viewport = firstPage.getViewport({
-        scale: 1,
-        rotation
-      })
-      this.updatePageView()
-    })
-  }
-
-  print () {
-    const pagesCount = this.pdfDocument.numPages
-    var iframe = document.getElementById('print-iframe')
-    if (!iframe) {
-      iframe = document.createElement('IFRAME')
-      var doc = null
-      iframe.setAttribute('id', 'print-iframe')
-      iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;')
-      document.body.appendChild(iframe)
-    }
-    doc = iframe.contentWindow.document
-    doc.body.innerHTML = ''
-    let pageStyleSheet = null
-    const drawerCanvas = (pageNum) => {
-      this.drawerCanvas(pageNum).then(canvas => {
-        if (!pageStyleSheet) {
-          pageStyleSheet = document.createElement('style')
-          pageStyleSheet.textContent = '@supports ((size:A4) and (size:1pt 1pt)) {' + '@page { size: auto;}' + '};' +
-          '@media print {' +
-            'body { margin: 0 }' +
-            'canvas { page-break-before: always; page-break-after: always; page-break-inside: avoid }' +
-          '}'
-          doc.head.appendChild(pageStyleSheet)
-        }
-        doc.body.appendChild(canvas)
-        if (pageNum >= pagesCount) {
-          setTimeout(() => {
-            iframe.contentWindow.focus()
-            iframe.contentWindow.print()
-          }, 100)
-        } else {
-          drawerCanvas(++pageNum)
-        }
-      })
-    }
-    drawerCanvas(1)
-  }
-}
-
-export default PdfViewer
+import util from '@epxing/core/src/runtime-utils/util'
+const DEFAULT_CACHE_SIZE = 10
+// 单页画布的像素上限（与 pdf.js 官方 viewer 的 maxCanvasPixels 默认值一致），高倍率下防止一页画布就吃掉上百 MB
+const MAX_CANVAS_PIXELS = 16777216
+
+// 脱离 DOM 的 canvas 位图要等元素本身被 GC 才归还，连续预览多份 PDF 时会堆出上 GB 的待回收位图；
+// 先把尺寸清零能让浏览器立刻释放（pdf.js 官方 viewer 的做法）
+function releaseCanvas (canvas) {
+  canvas.width = 0
+  canvas.height = 0
+}
+
+function binarySearchFirstItem (items, condition) {
+  var minIndex = 0
+  var maxIndex = items.length - 1
+
+  if (items.length === 0 || !condition(items[maxIndex])) {
+    return items.length
+  }
+
+  if (condition(items[minIndex])) {
+    return minIndex
+  }
+
+  while (minIndex < maxIndex) {
+    var currentIndex = minIndex + maxIndex >> 1
+    var currentItem = items[currentIndex]
+
+    if (condition(currentItem)) {
+      maxIndex = currentIndex
+    } else {
+      minIndex = currentIndex + 1
+    }
+  }
+
+  return minIndex
+}
+function backtrackBeforeAllVisibleElements (index, views, top) {
+  if (index < 2) {
+    return index
+  }
+
+  var elt = views[index].div
+  var pageTop = elt.offsetTop + elt.clientTop
+
+  if (pageTop >= top) {
+    elt = views[index - 1].div
+    pageTop = elt.offsetTop + elt.clientTop
+  }
+
+  for (var i = index - 2; i >= 0; --i) {
+    elt = views[i].div
+
+    if (elt.offsetTop + elt.clientTop + elt.clientHeight <= pageTop) {
+      break
+    }
+
+    index = i
+  }
+
+  return index
+}
+
+function getVisibleElements (scrollEl, views) {
+  var sortByVisibility = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false
+  var horizontal = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false
+  var top = scrollEl.scrollTop
+  var bottom = top + scrollEl.clientHeight
+  var left = scrollEl.scrollLeft
+  var right = left + scrollEl.clientWidth
+
+  function isElementBottomAfterViewTop (view) {
+    var element = view.div
+    var elementBottom = element.offsetTop + element.clientTop + element.clientHeight
+    return elementBottom > top
+  }
+
+  function isElementRightAfterViewLeft (view) {
+    var element = view.div
+    var elementRight = element.offsetLeft + element.clientLeft + element.clientWidth
+    return elementRight > left
+  }
+
+  var visible = []
+  var numViews = views.length
+  var firstVisibleElementInd = numViews === 0 ? 0 : binarySearchFirstItem(views, horizontal ? isElementRightAfterViewLeft : isElementBottomAfterViewTop)
+
+  if (firstVisibleElementInd > 0 && firstVisibleElementInd < numViews && !horizontal) {
+    firstVisibleElementInd = backtrackBeforeAllVisibleElements(firstVisibleElementInd, views, top)
+  }
+
+  var lastEdge = horizontal ? right : -1
+
+  for (var i = firstVisibleElementInd; i < numViews; i++) {
+    var view = views[i]
+    var element = view.div
+    var currentWidth = element.offsetLeft + element.clientLeft
+    var currentHeight = element.offsetTop + element.clientTop
+    var viewWidth = element.clientWidth
+    var viewHeight = element.clientHeight
+    var viewRight = currentWidth + viewWidth
+    var viewBottom = currentHeight + viewHeight
+
+    if (lastEdge === -1) {
+      if (viewBottom >= bottom) {
+        lastEdge = viewBottom
+      }
+    } else if ((horizontal ? currentWidth : currentHeight) > lastEdge) {
+      break
+    }
+
+    if (viewBottom <= top || currentHeight >= bottom || viewRight <= left || currentWidth >= right) {
+      continue
+    }
+
+    var hiddenHeight = Math.max(0, top - currentHeight) + Math.max(0, viewBottom - bottom)
+    var hiddenWidth = Math.max(0, left - currentWidth) + Math.max(0, viewRight - right)
+    var percent = (viewHeight - hiddenHeight) * (viewWidth - hiddenWidth) * 100 / viewHeight / viewWidth | 0
+    visible.push({
+      id: view.id,
+      x: currentWidth,
+      y: currentHeight,
+      view: view,
+      percent: percent
+    })
+  }
+
+  var first = visible[0]
+  var last = visible[visible.length - 1]
+
+  if (sortByVisibility) {
+    visible.sort(function (a, b) {
+      var pc = a.percent - b.percent
+
+      if (Math.abs(pc) > 0.001) {
+        return -pc
+      }
+
+      return a.id - b.id
+    })
+  }
+
+  return {
+    first: first,
+    last: last,
+    views: visible
+  }
+}
+function watchScroll (viewAreaElement, callback) {
+  var debounceScroll = function debounceScroll (evt) {
+    if (rAF) {
+      return
+    }
+
+    rAF = window.requestAnimationFrame(function viewAreaElementScrolled () {
+      rAF = null
+      var currentX = viewAreaElement.scrollLeft
+      var lastX = state.lastX
+
+      if (currentX !== lastX) {
+        state.right = currentX > lastX
+      }
+
+      state.lastX = currentX
+      var currentY = viewAreaElement.scrollTop
+      var lastY = state.lastY
+
+      if (currentY !== lastY) {
+        state.down = currentY > lastY
+      }
+
+      state.lastY = currentY
+      callback(state)
+    })
+  }
+
+  var state = {
+    right: true,
+    down: true,
+    lastX: viewAreaElement.scrollLeft,
+    lastY: viewAreaElement.scrollTop,
+    _eventHandler: debounceScroll
+  }
+  var rAF = null
+  viewAreaElement.addEventListener('scroll', debounceScroll, true)
+  return state
+}
+
+class PdfViewer {
+  constructor () {
+    this.pages = []
+    this.loadViews = []
+    this.searchText = ''
+    this.searchTextArr = []
+    this.scrollState = null
+    this.destroyed = false
+  }
+
+  // 页面 div 是 append 进容器的，实例不销毁就会跟下一份预览叠在一起；
+  // scroll 监听和 ResizeObserver 也得一并摘掉，否则每预览一次多留一份。
+  destroy () {
+    this.destroyed = true
+    const container = this.pdfConfig && this.pdfConfig.viewerContainer
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+    if (container && this.scrollState && this.scrollState._eventHandler) {
+      container.removeEventListener('scroll', this.scrollState._eventHandler, true)
+    }
+    this.scrollState = null
+    // 只摘自己建的页面节点，容器里可能还有调用方渲染的工具条
+    for (const item of this.pages) {
+      if (!item.div) continue
+      for (const canvas of item.div.querySelectorAll('canvas')) releaseCanvas(canvas)
+      if (item.div.parentNode) item.div.parentNode.removeChild(item.div)
+    }
+    this.pages = []
+    this.loadViews = []
+    this.searchTextArr = []
+    // 销毁 loadingTask 会连带销毁文档和 worker；文档还在下载时关闭预览，也能就此中止下载而不是等它下完再释放。
+    // 销毁失败属于清理路径的异常，不吞掉，让它照常暴露在控制台便于排障
+    if (this.loadingTask) {
+      this.loadingTask.destroy()
+      this.loadingTask = null
+    }
+    this.pdfDocument = null
+  }
+
+  async searchTextInPDF (searchText) {
+    const numPages = this.pdfDocument.numPages
+    let currentPage = 1
+    this.clearHighlights()
+    this.searchTextArr = []
+    if (!searchText) return
+    this.searchText = searchText
+    const searchPage = async (pageNum) => {
+      try {
+        const page = await this.pdfDocument.getPage(pageNum)
+        const initViewport = page.getViewport({ scale: 1 })
+        let scale = 1
+        if (this.pdfConfig.zoom === 'page-width') {
+          const num = this.pdfConfig.viewerContainer.offsetWidth / initViewport.width
+          scale = num
+          // scale = Math.round(this.pdfConfig.viewerContainer.offsetWidth / initViewport.width)
+        } else {
+          scale = this.pdfConfig.zoom
+        }
+        const viewport = page.getViewport({ scale: 1 })
+        const textContent = await page.getTextContent()
+
+        const textItems = textContent.items
+        for (let i = 0; i < textItems.length; i++) {
+          const textItem = textItems[i]
+          const text = textItem.str
+
+          // 查找搜索文字在当前文本项中的位置
+          let startIndex = text.indexOf(searchText)
+          while (startIndex !== -1) {
+            // 找到匹配的搜索文字
+            const endIndex = startIndex + searchText.length
+            // 计算搜索文字的边界框
+            const { x, y, width, height } = this.calculateTextBoundingBox(textItem, startIndex, endIndex, viewport, scale)
+
+            this.searchTextArr.push({
+              pageNum,
+              x: x * scale,
+              y: y * scale,
+              width: width * scale,
+              height: height * scale
+            })
+            // this.searchTextArr.push({
+            //   pageNum,
+            //   x,
+            //   y,
+            //   width,
+            //   height
+            // })
+
+            // 继续查找下一个匹配
+            startIndex = text.indexOf(searchText, endIndex)
+          }
+        }
+      } catch (error) {
+        console.error('Error processing page:', error)
+      }
+    }
+
+    // 使用for循环替代递归实现同步执行
+    for (currentPage = 1; currentPage <= numPages; currentPage++) {
+      await searchPage(currentPage)
+    }
+    if (this.searchTextArr.length > 0) {
+      this.scrollToPage(this.searchTextArr[0])
+    }
+  }
+
+  calculateTextBoundingBox (textItem, startIndex, endIndex, viewport, currentScale) {
+    const transform = textItem.transform
+    const textWidth = textItem.width
+    const textHeight = textItem.height
+
+    // 计算搜索文字的起始位置
+    const startX = transform[4] + (startIndex / textItem.str.length) * textWidth
+    const startY = viewport.height - transform[5]
+
+    // 计算搜索文字的宽度
+    const highlightWidth = ((endIndex - startIndex) / textItem.str.length) * textWidth
+
+    // return {
+    //   x: startX * currentScale, // 乘以当前缩放比例
+    //   y: (startY - textHeight) * currentScale, // 乘以当前缩放比例
+    //   width: highlightWidth * currentScale, // 乘以当前缩放比例
+    //   height: textHeight * currentScale // 乘以当前缩放比例
+    // }
+    return {
+      x: startX,
+      y: startY - textHeight, // PDF 的 y 坐标是倒置的
+      width: highlightWidth,
+      height: textHeight
+    }
+  }
+
+  highlightText (pageNum, x, y, width, height) {
+    const viewer = this.pdfConfig.viewerContainer
+    const pageElement = viewer.querySelector(`.pdf-viewer-page[data-page-number="${pageNum}"]`)
+
+    if (pageElement) {
+      const highlight = document.createElement('div')
+      highlight.className = 'search-highlight' // 添加类名
+      highlight.style.position = 'absolute'
+      highlight.style.left = `${x}px`
+      highlight.style.top = `${y}px`
+      highlight.style.width = `${width}px`
+      highlight.style.height = `${height}px`
+      highlight.style.backgroundColor = 'rgba(255, 255, 0, 0.5)'
+      highlight.style.pointerEvents = 'none'
+
+      pageElement.appendChild(highlight)
+    }
+  }
+
+  clearHighlights () {
+    const highlights = document.querySelectorAll('.search-highlight')
+    highlights.forEach(highlight => {
+      highlight.remove() // 移除高亮元素
+    })
+  }
+
+  scrollToPage ({ pageNum, x, y, width, height }) {
+    this.clearHighlights()
+    const scrollY = y > 60 ? y - 60 : y
+    // 来显示 PDF 页面的容器
+    const viewer = this.pdfConfig.viewerContainer
+    const pageElement = viewer.querySelector(`.pdf-viewer-page[data-page-number="${pageNum}"]`)
+    if (pageElement) {
+      viewer.scrollTo({
+        top: pageElement.offsetTop + scrollY, // 计算滚动位置
+        behavior: 'smooth' // 平滑滚动
+      })
+      // 高亮显示
+      this.highlightText(pageNum, x, y, width, height)
+    }
+  }
+
+  loadPdf () {
+    return util.usePlugin('pdf').then(pdf => {
+      this.pdfJs = pdf
+    })
+  }
+
+  async run (config) {
+    // 加载pdf
+    this.pdfConfig = {
+      viewerContainer: config.container,
+      url: config.url,
+      cMapUrl: config.cMapUrl || (util.getPublicPath() === './' ? './cmaps/' : util.getPublicPath() + 'cmaps/'),
+      cMapPacked: config.cMapPacked !== null ? config.cMapPacked : true,
+      zoom: config.zoom || 'page-width',
+      pageRotate: 0
+    }
+    await this.loadPdf()
+    // pdf.js 脚本还在加载时实例就被销毁了，不要再发起下载
+    if (this.destroyed) return
+    this.loadingTask = this.pdfJs.getDocument({
+      url: this.pdfConfig.url,
+      cMapUrl: this.pdfConfig.cMapUrl,
+      cMapPacked: this.pdfConfig.cMapPacked
+    })
+    return this.loadingTask.promise.then((pdfDocument) => {
+      this.load(pdfDocument)
+    }).catch(err => {
+      // 被 destroy 中止的加载不算错误，其它异常照常抛给调用方
+      if (!this.destroyed) throw err
+    })
+  }
+
+  load (pdfDocument) {
+    // 文档还在下载时实例已被销毁（快速切换预览），这份结果直接丢掉，不能再往容器里塞页面
+    if (this.destroyed) {
+      try {
+        pdfDocument.destroy()
+      } catch (e) {
+        // ignore
+      }
+      return
+    }
+    this.pdfDocument = pdfDocument
+    this.pdfDocument.getPage(1).then((firstPage) => {
+      if (this.destroyed) return
+      const pagesCount = pdfDocument.numPages
+      const viewport = firstPage.getViewport({
+        scale: 1
+      })
+      for (let pageNum = 1; pageNum <= pagesCount; ++pageNum) {
+        this.createPageView({
+          container: this.pdfConfig.viewerContainer,
+          id: pageNum,
+          viewport: viewport.clone()
+        })
+      }
+      this.scrollState = watchScroll(this.pdfConfig.viewerContainer, this.scrollUpdate.bind(this))
+      setTimeout(() => {
+        if (this.destroyed) return
+        this.scrollUpdate()
+        this.resizeObserver = new ResizeObserver((entries) => {
+          this.resetPageStyle()
+        })
+        this.resizeObserver.observe(this.pdfConfig.viewerContainer)
+      }, 10)
+    })
+  }
+
+  createPageView ({ container, id }) {
+    this.pdfDocument.getPage(id).then((page) => {
+      if (this.destroyed) return
+      const viewport = page.getViewport({
+        scale: 1
+      })
+      const pageWidth = viewport.width
+      const pageHeight = viewport.height
+      const pageRatio = pageWidth / pageHeight
+      const canvasWidth = container.offsetWidth
+      const canvasHeight = canvasWidth / pageRatio | 0
+      const div = document.createElement('div')
+      div.className = 'pdf-viewer-page'
+      div.style.width = Math.floor(canvasWidth) + 'px'
+      div.style.height = Math.floor(canvasHeight) + 'px'
+      div.setAttribute('data-page-number', id)
+      const loading = document.createElement('div')
+      loading.className = 'el-icon-loading pdf-viewer-loading'
+      div.appendChild(loading)
+      container.appendChild(div)
+      this.pages.push({ id, div: div, viewport })
+      this.viewport = viewport
+    })
+  }
+
+  resetPageStyle () {
+    for (const item of this.pages) {
+      if (item.div) {
+        const viewport = item.viewport || this.viewport
+        const pageWidth = viewport.width
+        const pageHeight = viewport.height
+        const pageRatio = pageWidth / pageHeight
+        const canvasWidth = this.pdfConfig.zoom === 'page-width' ? this.pdfConfig.viewerContainer.offsetWidth : viewport.width * (this.pdfConfig.zoom || 1)
+        const canvasHeight = canvasWidth / pageRatio | 0
+        item.div.style.width = Math.floor(canvasWidth) + 'px'
+        item.div.style.height = Math.floor(canvasHeight) + 'px'
+      }
+    }
+  }
+
+  updatePageView () {
+    var visible = this.getVisiblePages()
+    var visiblePages = visible.views
+    var numVisiblePages = visiblePages.length
+    if (numVisiblePages === 0) {
+      return
+    }
+    this.resetPageStyle()
+    var newCacheSize = Math.max(DEFAULT_CACHE_SIZE, 2 * numVisiblePages + 1)
+    this.resizeVisiblePages(newCacheSize, visiblePages)
+    for (const item of this.loadViews) {
+      this.destroyPageView(item)
+    }
+    this.loadViews = []
+    this.renderPageView(visible, () => {
+      setTimeout(() => {
+        const page = visiblePages[0].view.div
+        this.pdfConfig.viewerContainer.scrollTop = page.offsetTop
+      }, 100)
+    })
+  }
+
+  scrollUpdate () {
+    var visible = this.getVisiblePages()
+    var visiblePages = visible.views
+    var numVisiblePages = visiblePages.length
+
+    if (numVisiblePages === 0) {
+      return
+    }
+
+    var newCacheSize = Math.max(DEFAULT_CACHE_SIZE, 2 * numVisiblePages + 1)
+
+    this.resizeVisiblePages(newCacheSize, visiblePages)
+    this.renderPageView(visible)
+  }
+
+  getVisiblePages () {
+    return getVisibleElements(this.pdfConfig.viewerContainer, this.pages)
+  }
+
+  resizeVisiblePages (newCacheSize) {
+    if (this.loadViews.length > newCacheSize) {
+      this.destroyPageView(this.loadViews.shift())
+    }
+  }
+
+  destroyPageView ({ id }) {
+    const page = this.pages.find(item => item.id === id)
+    const div = page.div
+    var childNodes = div.childNodes
+    for (var i = childNodes.length - 1; i >= 0; i--) {
+      var node = childNodes[i]
+      if (node.className.includes('pdf-viewer-loading')) {
+        node.style.display = 'block'
+      } else {
+        if (node.tagName === 'CANVAS') releaseCanvas(node)
+        div.removeChild(node)
+      }
+    }
+    div.removeAttribute('data-loaded')
+  }
+
+  renderPageView (visible, cb) {
+    for (const item of visible.views) {
+      const div = item.view.div
+      if (div.getAttribute('data-loaded')) continue
+      div.setAttribute('data-loaded', true)
+      this.pdfDocument.getPage(item.view.id)
+        .then((page) => {
+          if (this.destroyed) return
+          const canvas = document.createElement('canvas')
+          const ctx = canvas.getContext('2d', {
+            alpha: false
+          })
+          const initViewport = page.getViewport({ scale: 1 })
+          const rotation = (this.pdfConfig.pageRotate + initViewport.rotation) % 360
+          const baseViewport = page.getViewport({ scale: 1, rotation })
+          // 渲染倍率 = 画布实际显示宽度 / 页面宽度 × 设备像素比，再按总像素数兜底。
+          // 原来按 Math.ceil(body 宽 / 页宽) 取整，1920 宽屏上 A4 会画成 4 倍（一页约 32MB），
+          // 十来页缓存就是几百 MB，连续预览多份必然溢出
+          const cssWidth = div.clientWidth || this.pdfConfig.viewerContainer.offsetWidth || baseViewport.width
+          let scale = cssWidth / baseViewport.width * (window.devicePixelRatio || 1)
+          const pixels = baseViewport.width * baseViewport.height * scale * scale
+          if (pixels > MAX_CANVAS_PIXELS) scale *= Math.sqrt(MAX_CANVAS_PIXELS / pixels)
+          const viewport = page.getViewport({ scale, rotation })
+          canvas.width = viewport.width // 画布大小,默认值是width:300px,height:150px
+          canvas.height = viewport.height
+          canvas.style.width = '100%' // 画布的框架大小
+          const renderContext = {
+            canvasContext: ctx,
+            viewport: viewport,
+            enableWebGL: false,
+            renderInteractiveForms: false
+          }
+          var renderTask = page.render(renderContext)
+          renderTask.promise.then(() => {
+            // 渲染期间预览已关闭，这块画布不会再上屏，立刻释放
+            if (this.destroyed) {
+              releaseCanvas(canvas)
+              return
+            }
+            const loading = item.view.div.querySelector('.pdf-viewer-loading')
+            loading.style.display = 'none'
+            item.view.div.appendChild(canvas)
+            this.loadViews.push(item.view)
+            cb && cb()
+          }, () => {
+            // destroy 时 pdf.js 会 cancel 渲染中的任务，画布同样要释放
+            releaseCanvas(canvas)
+          })
+        })
+    }
+  }
+
+  drawerCanvas (num) {
+    return new Promise(resolve => {
+      this.pdfDocument.getPage(num)
+        .then(pdfPage => {
+          var canvas = document.createElement('canvas')
+          const ctx = canvas.getContext('2d')
+          const initViewport = this.viewport
+          const scale = Math.ceil(document.body.offsetWidth / initViewport.width)
+
+          const viewport = pdfPage.getViewport({ scale: scale })
+          canvas.width = viewport.width // 画布大小,默认值是width:300px,height:150px
+          canvas.height = viewport.height
+          canvas.style.width = '100%' // 画布的框架大小
+          const renderContext = {
+            canvasContext: ctx,
+            viewport: viewport,
+            enableWebGL: false,
+            renderInteractiveForms: false
+          }
+          var renderTask = pdfPage.render(renderContext)
+          renderTask.promise.then(() => {
+            resolve(canvas)
+          })
+        })
+    })
+  }
+
+  scaleChanged (scale) {
+    this.pdfConfig.zoom = scale
+    this.updatePageView()
+  }
+
+  rotateChanged (delta) {
+    this.pdfConfig.pageRotate += delta
+    const rotation = this.pdfConfig.pageRotate % 360
+    this.pdfDocument.getPage(1).then((firstPage) => {
+      this.viewport = firstPage.getViewport({
+        scale: 1,
+        rotation
+      })
+      this.updatePageView()
+    })
+  }
+
+  print () {
+    const pagesCount = this.pdfDocument.numPages
+    var iframe = document.getElementById('print-iframe')
+    if (!iframe) {
+      iframe = document.createElement('IFRAME')
+      var doc = null
+      iframe.setAttribute('id', 'print-iframe')
+      iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;')
+      document.body.appendChild(iframe)
+    }
+    doc = iframe.contentWindow.document
+    doc.body.innerHTML = ''
+    let pageStyleSheet = null
+    const drawerCanvas = (pageNum) => {
+      this.drawerCanvas(pageNum).then(canvas => {
+        if (!pageStyleSheet) {
+          pageStyleSheet = document.createElement('style')
+          pageStyleSheet.textContent = '@supports ((size:A4) and (size:1pt 1pt)) {' + '@page { size: auto;}' + '};' +
+          '@media print {' +
+            'body { margin: 0 }' +
+            'canvas { page-break-before: always; page-break-after: always; page-break-inside: avoid }' +
+          '}'
+          doc.head.appendChild(pageStyleSheet)
+        }
+        doc.body.appendChild(canvas)
+        if (pageNum >= pagesCount) {
+          setTimeout(() => {
+            iframe.contentWindow.focus()
+            iframe.contentWindow.print()
+          }, 100)
+        } else {
+          drawerCanvas(++pageNum)
+        }
+      })
+    }
+    drawerCanvas(1)
+  }
+}
+
+export default PdfViewer