askbot-dragon 1.5.76-beta → 1.5.77-beta

package/src/components/newPdfPosition.vue

@@ -0,0 +1,878 @@
+<template>
+  <div class="pdf-touch-box"
+       ref="pdfView"
+       @scroll="pdfScroll"
+  >
+    <div   :style="{  width:btnWidth + 'px' }">
+      <button   @click="scaleEvent(3.5)">3.5</button>
+      <button   @click="scaleEvent(2.5)">2.5</button>
+      <button   @click="scaleEvent(1.8)">1.8</button>
+      <button   @click="scaleEvent(1.4)">1.4</button>
+      <button   @click="scaleEvent(1)">1</button>
+      <button   @click="scaleEvent(0.5)">0.5</button>
+    </div>
+
+    <div
+        v-show="!loading"
+        class="pdf-canvas-wrap"
+        id="pdf-canvas-wrap"
+        :style="{
+        top: viewTop + 'px',
+        left: viewLeft + 'px',
+        width:viewWidth + 'px',
+        height: viewHeight + 'px'
+      }"
+    ></div>
+    <p  v-show="loading">正在加载...</p>
+  </div>
+</template>
+
+
+
+<script>
+// import * as PDFJS from 'pdfjs-dist'
+// console.log(PDFJS)
+//
+// import { TextLayerBuilder, EventBus } from 'pdfjs-dist/web/pdf_viewer'
+import _ from "lodash";
+
+const pdfjsLib = window['pdfjsLib']
+if(pdfjsLib) {
+  pdfjsLib.GlobalWorkerOptions.workerSrc = window['pdfjs-dist/build/pdf.worker']
+  // 'pdfjs-dist/build/pdf.worker';
+}
+const { TextLayerBuilder,EventBus } = window['pdfjs-dist/web/pdf_viewer']
+// import 'pdfjs-dist/web/pdf_viewer.css'
+console.log(TextLayerBuilder)
+
+// 本地
+// window.pdfjsWorker = require("pdfjs-dist/build/pdf.worker.js");
+
+// cdn 2.8.335  2.6.347 2.5.207
+pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/build/pdf.worker.min.js'
+
+// https://github.com/mozilla/pdf.js/blob/master/examples/node/getinfo.js
+// Requires single file built version of PDF.js -- please run
+// `gulp singlefile` before running the example.
+// const pdfjsLib = require("pdfjs-dist/legacy/build/pdf.js");
+
+const CSS_UNITS = 96.0 / 72.0
+// const PRINT_UNITS = 150 / 72.0;
+
+let userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''
+let platform = (typeof navigator !== 'undefined' && navigator.platform) || ''
+let maxTouchPoints = (typeof navigator !== 'undefined' && navigator.maxTouchPoints) || 1
+
+let maxCanvasPixels = 16777216
+// PDF之外占据的宽度 -18 padding -18减去滚动条宽度（不确定）
+let autoWidth = 36
+let textLayerTop = 3
+let scaleInterval = 0.05
+
+let isAndroid = /Android/.test(userAgent)
+let isIOS = /(iPad|iPhone|iPod)(?=;)/.test(userAgent) || (platform === 'MacIntel' && maxTouchPoints > 1)
+;(function checkCanvasSizeLimitation() {
+  if (isIOS || isAndroid) {
+    maxCanvasPixels = 5242880
+    autoWidth -= 18
+    textLayerTop -= 1
+    // 手机上面缩放对清晰度影响更小
+    scaleInterval = 0.4
+  }
+})()
+import AlloyFinger from 'alloyfinger'
+//包装一下 不然 eslint 报警告
+class FingerTouch {
+  constructor(element, options) {
+    Object.assign(this, AlloyFinger.prototype)
+    AlloyFinger.call(this, element, options)
+  }
+}
+export default {
+  name: "newPdfPosition",
+  data() {
+    return {
+      src: '../assets/js/test.pdf',
+      loading: true,
+      pdfDoc: null,
+      boxEl: null,
+      wrapEl: null,
+      areaWidth: 0,
+      btnWidth: 0,
+      viewWidth: 0,
+      viewHeight: 0,
+      pixelRatio: 2,
+      isFirstTimeRender: true,
+      viewport: null,
+      canvasEles: [],
+      canvasCtxs: [],
+      totallPage: 0,
+      pageScale: 1, // pdf 适应窗口产生的 scale
+      curCanvasCSSWh: null,
+      transform: null,
+      pageRenderedNum: 0,
+      scaleTimer: null,
+      lastStyleScale: 1,
+      lastRerenderScale: 1,
+      alloyFinger: null,
+      viewTop: 0,
+      viewLeft: 9,
+      textEls: [],
+      url: '',
+      pages: [],
+      pageLoadStatus: {
+        WAIT: 0,
+        LOADED: 1,
+      },
+      scale: 1,
+      rotation: 0,
+      pageSize: {},
+      PAGE_INTVERVAL: 15,
+      SLICE_COUNT: 5,
+      contentView: null,
+      fisrtLoad: true,
+      TextLayerBuilder: null,
+      totalPageCount: 0,
+      identifyTextPostion: {
+        top: 0,
+        left: 0,
+        width: 100,
+        height: 0,
+        page: 1,
+        pageHeight: 0,
+        pageWidth: 0,
+        extractInfo: {},
+        currentPageAllLine: []
+      },
+      currentPageAllLine: [],
+      pdfUrl: '',
+      cachePdf: [],
+      newViewer: null,
+      currentPage: 0,
+      changetoolbar: false,
+      allTr:[],
+      preViewType: 'pdf',
+      displacement:{
+        pageX: 0,
+        pageY: 0,
+        moveable: false,
+        pageX2: 0,
+        pageY2: 0,
+        originScale: 1,
+      },
+      isTouchMoved: false,
+      transformSalce: null,
+      isPC: false,
+      handScale: 'auto',
+      scaleList:[
+        {
+          label:'自动缩放',
+          value:'auto'
+        },
+        {
+          label:'实际比例',
+          value:'reality'
+        },
+        {
+          label:'100%',
+          value: 1
+        },
+        {
+          label:'120%',
+          value: 1.2
+        },
+        {
+          label:'150%',
+          value: 1.5
+        },
+        {
+          label:'170%',
+          value: 1.7
+        }
+        ,
+        {
+          label:'200%',
+          value: 2
+        }
+      ],
+      scrollTop:0,
+      scrollLeft:0,
+    }
+  },
+  props:["tagIds"],
+  mounted() {
+    // this.init()
+  },
+  methods: {
+    async init(loadPage) {
+      //禁止下拉刷新
+      document.addEventListener(
+          'touchmove',
+          function () {
+            // ev.preventDefault()
+          },
+          { passive: false }
+      )
+      this.boxEl = document.querySelector('.pdf-touch-box')
+      this.wrapEl = document.getElementsByClassName('pdf-canvas-wrap')[0]
+      this.btnWidth = this.areaWidth = this.boxEl.clientWidth
+      await this.initPages(loadPage.total);
+      const loadingState = await this.getPDF(loadPage.page)
+      if (loadingState === 'success') {
+        this.initRenderOneByOne(loadPage.page)
+        this.initTouch()
+      } else this.boxEl.innerText = loadingState
+    },
+    initTouch() {
+      this.alloyFinger = new FingerTouch(this.wrapEl, {})
+      this.alloyFinger.on('pinch', e => {
+        let zoom = e.zoom
+        let curScale = this.lastStyleScale * zoom
+        if (curScale <= 1 || curScale >= 5) return
+        this.scaleEvent(curScale)
+      })
+
+      this.alloyFinger.on('pressMove', e => {
+        this.viewTop += e.deltaY
+        this.viewLeft += e.deltaX
+      })
+    },
+    scaleEvent(scale) {
+      // 渲染中 不让缩放 也不让重绘
+      if (this.pageRenderedNum != this.totallPage || this.totallPage === 0) return
+
+      // 没在渲染中 随意缩放
+      this.scaleCanvas(scale)
+
+      // 说明是第一次事件 或重绘完成 开始计时
+      if (this.scaleTimer === null) {
+        this.scaleTimer = this.renderDelayer(666)
+      }
+      //时间间隔内再次触发缩放 重新计时
+      clearTimeout(this.scaleTimer)
+      this.scaleTimer = this.renderDelayer(666)
+    },
+    renderDelayer(interval) {
+      return setTimeout(() => {
+        this.scaleRenderAll()
+        this.scaleTimer = null
+      }, interval)
+    },
+    scaleTopLeft(width, height) {
+      if (Math.abs(this.viewTop) > height / 2) this.viewTop *= 1 / 2
+      if (Math.abs(this.viewLeft) > width / 2) this.viewLeft *= 1 / 2
+    },
+    scaleCanvas(scale) {
+      this.lastStyleScale = scale
+      console.log(scale)
+      // 改变 viewport 大小
+      this.viewport = this.viewport.clone({
+        scale: (this.pageScale * CSS_UNITS * scale).toFixed(3)
+      })
+
+      const { styleWidth, styleHeight } = this.getCanvasCSSWH()
+
+      // 计算一下 top left 不然可能会显示到 窗口外面 看不到了
+      this.scaleTopLeft(styleWidth, styleHeight)
+
+      // 改变CSS canvas 会变模糊
+      this.canvasEles.forEach(canvas => {
+        // 不修改 width height 不然会重置 canvas 变空白
+        canvas.style.width = styleWidth  + 'px'
+        canvas.style.height = styleHeight + 'px'
+      })
+    },
+    // 使用新渲染的 canvas  替换 缩放过后不清晰的 canvas
+    scaleRenderAll() {
+      let curInterval = Math.abs(this.lastStyleScale - this.lastRerenderScale)
+      let curScaleInterval = scaleInterval
+      let isNarrow = this.lastStyleScale < this.lastRerenderScale
+      // 如果是变小 变化不大时 清晰度影响更小
+      if (isNarrow) curScaleInterval = scaleInterval * 2
+
+      console.log('scaleRenderAll', curScaleInterval, curInterval)
+      // 变化很小的时候就不计时重新渲染了 清晰度影响不大 1.1 - 1 = 0.10000000000000009
+      if (curInterval <= curScaleInterval) return
+
+      this.lastRerenderScale = this.lastStyleScale
+
+      this.pageRenderedNum = 0
+      const len = this.canvasEles.length
+      for (let pageNum = 1; pageNum <= len; pageNum++) {
+        let newCanvas = document.createElement('canvas')
+        let newCtx = newCanvas.getContext('2d', {
+          alpha: false
+        })
+        newCanvas.setAttribute('id', `pdf-canvas${pageNum}`)
+
+        this.canvasCtxs[pageNum - 1] = newCtx
+
+        let that = this
+        console.debug('pdfDoc',this.pdfDoc)
+        this.pdfDoc.getPage(pageNum).then(function (page) {
+          that.setCanvasCSSWh.call(that, newCanvas)
+
+          let renderTask = that.pageRender.call(that, page, newCtx)
+
+          renderTask.promise
+              .then(function () {
+                let oldCanvas = that.canvasEles[pageNum - 1]
+                oldCanvas.parentElement.replaceChild(newCanvas, oldCanvas)
+                that.canvasEles[pageNum - 1] = newCanvas
+                that.pageRenderedNum++
+
+                return page.getTextContent()
+              })
+              .then(textContent => that.textRerender.call(that, pageNum, textContent))
+              .catch(e => console.log(e))
+        })
+      }
+    },
+    initPages (totalPage) {
+      this.totalPageCount = totalPage;
+      // this.totallPage = totalPage;
+      for (let i = 0; i < totalPage; i += 1) {
+        this.pages.push({
+          pageNo: i + 1,
+          loadStatus: false,
+          pdfPage: null,
+          dom: null
+        });
+      }
+    },
+    async getPDF (loadPage) {
+      let that = this;
+      if(that.pages[loadPage - 1] && ((that.pages[loadPage - 1].dom && that.pages[loadPage - 1].dom.children.length > 0) || that.pages[loadPage - 1].loadStatus)) {
+        return
+      } else {
+        if (that.changetoolbar) {
+          that.$nextTick(() => {
+            that.renderHighlights()
+          })
+          that.changetoolbar = false
+        }
+      }
+      // 记录开始缓存的状态
+      // pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js");
+      // 拿到第一个分片
+      const { url } = await that.fetchPdfFragment(loadPage);
+      let loadingTask = pdfjsLib.getDocument(url);
+      return new Promise(reslove => {
+        loadingTask.promise.then((pdfDoc_) => {
+          that.pdfDoc = pdfDoc_
+          that.totallPage += 1
+          console.debug('totallPage',that.totallPage)
+          // that.totallPage = pdfDoc_.numPages;
+          that.loading = false
+          reslove('success')
+        })
+      })
+    },
+    async fetchPdfFragment (pageIndex) {
+      // 置换加签后的文件地址。
+      let obj = {}
+      await this.$http.post(
+          '/knowledge-api/temporary-certificate/or-origin?expired=30',
+          this.pdfUrl + pageIndex + '.pdf',
+          {
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }).then(async res => {
+        if(res.bodyText) {
+          // 最后返回一个 包含这4个参数的对象
+          obj = await {
+            "startPage": pageIndex, // 分片的开始页码
+            "endPage": pageIndex + 5, // 分片结束页码
+            "totalPage": this.totalPageCount, // pdf 总页数
+            "url": res.bodyText // 分片内容下载地址
+          }
+        }
+        if (res.data) {
+          // 最后返回一个 包含这4个参数的对象
+          obj = await {
+            "startPage": pageIndex, // 分片的开始页码
+            "endPage": pageIndex + 5, // 分片结束页码
+            "totalPage": this.totalPageCount, // pdf 总页数
+            "url": res.data // 分片内容下载地址
+          }
+        }
+      })
+      return obj
+    },
+    // 渲染需要展示的页面，不需展示的页码将其清除
+    renderPages (pageIndex) {
+      const pagesToRender = this.getRenderScope(pageIndex);
+      for (const i of this.pages) {
+        if(pagesToRender.some(p =>{ return p.pageNo == i.pageNo })) {
+          if(i.loadStatus === true) {
+            console.debug('pagesToRender',i)
+            this.initRenderOneByOne(i.pageNo)
+          } else {
+            // this.renderPageLoading(i, i.pageNo)
+          }
+        } else {
+          // this.clearPage(i);
+        }
+      }
+
+    },
+    // 根据当前的可视范围内的页码，我们前后只保留 8 页
+    getRenderScope (pageIndex) {
+      const pagesToRender = [];
+      let i = pageIndex - 1;
+      let j = pageIndex + 1;
+      // pageIndex - 1 表示当前页码数 对应的下标位置
+      pagesToRender.push(this.pages[pageIndex - 1]);
+      while (pagesToRender.length < 8 && pagesToRender.length < this.pages.length) {
+        if (i > 0) {
+          pagesToRender.push(this.pages[i - 1]);
+          i -= 1;
+        }
+        if (pagesToRender.length >= 8) {
+          break;
+        }
+        if (j <= this.pages.length) {
+          pagesToRender.push(this.pages[j - 1]);
+          j += 1;
+        }
+      }
+      // for (let index = 0; index < array.length; index++) {
+      //     const element = array[index];
+
+      // }
+      return pagesToRender;
+    },
+    initRenderOneByOne(pageIndex) {
+      console.debug('pageIndex',pageIndex,this.totallPage)
+      // for (let pageNum = pageIndex; pageNum <= this.totallPage; pageNum++) {
+      //
+      // }
+      let canvas = document.createElement('canvas')
+      canvas.setAttribute('id', `pdf-canvas${pageIndex}`)
+      canvas.setAttribute('class', `pdfcanvas`)
+      // alpha 设定 canvas 背景总是不透明，可以加快浏览器绘制透明的内容和图片 初始化出来 canvas 为黑色背景
+      // 实际上 导致 重新渲染的时候 闪黑屏
+      // let ctx = canvas.getContext("2d", {
+      //   alpha: false,
+      // });
+      let ctx = canvas.getContext('2d')
+      this.canvasCtxs.push(ctx)
+      this.canvasEles.push(canvas)
+      //  this.wrapEl.appendChild(canvas);
+
+      let pageDiv = document.createElement('div')
+      pageDiv.setAttribute('id', 'page-' + pageIndex)
+      pageDiv.setAttribute('style', 'position: relative;')
+      this.wrapEl.appendChild(pageDiv)
+      pageDiv.appendChild(canvas)
+      this.renderSinglePage(canvas, pageIndex)
+      // this.renderSinglePage(this.canvasEles[0], 1)
+    },
+
+    renderSinglePage(canvas, pageNum) {
+      let ctx = this.canvasCtxs[pageNum - 1]
+      let that = this
+      that.pdfDoc.getPage(1).then(async function (page) {
+        that.pages[pageNum - 1].loadStatus = true
+        that.pages[pageNum - 1].pdfPage = page;
+        if (that.isFirstTimeRender) that.initView(page, ctx)
+
+        if (pageNum === 1) await that.getCanvasCSSWH()
+        await that.setCanvasCSSWh.call(that, canvas)
+        let renderTask = that.pageRender.call(that, page, ctx)
+
+        renderTask.promise
+            .then(function () {
+              // if (that.totallPage > pageNum) {
+              //   that.renderSinglePage(that.canvasEles[pageNum], pageNum + 1)
+              // }
+              // const html = canvas.toDataURL();
+              // let image = document.createElement('img');
+              // image.setAttribute('src',html)
+
+              that.pageRenderedNum++
+              return page.getTextContent()
+            })
+            .then(textContent => that.textRender.call(that, canvas, pageNum, textContent))
+      })
+    },
+    textRerender(pageIndex, textContent) {
+      const oldDiv = this.textEls[pageIndex - 1]
+
+      const newDiv = document.createElement('div')
+      newDiv.setAttribute('class', 'textLayer')
+      newDiv.setAttribute('style', `top: ${textLayerTop}px`)
+
+      oldDiv.parentElement.replaceChild(newDiv, oldDiv)
+      this.textEls[pageIndex - 1] = newDiv
+      console.debug('textContent',textContent)
+      this.renderTextLayer(newDiv, pageIndex, textContent)
+    },
+    textRender(canvas, pageIndex, textContent) {
+      const textLayerDiv = document.createElement('div')
+      textLayerDiv.setAttribute('class', 'textLayer')
+      textLayerDiv.setAttribute('style', `top: ${textLayerTop}px`)
+      canvas.parentElement.appendChild(textLayerDiv)
+      this.textEls[pageIndex - 1] = textLayerDiv
+      this.renderTextLayer(textLayerDiv, pageIndex, textContent)
+    },
+    renderTextLayer(el, index, content) {
+      var textLayer = new TextLayerBuilder({
+        eventBus: new EventBus(),
+        textLayerDiv: el,
+        pageIndex: index,
+        viewport: this.viewport
+      })
+
+      textLayer.setTextContent(content)
+      textLayer.render()
+      this.fisrtLoad = false;
+    },
+    setCanvasCSSWh(canvas) {
+      let that = this
+      canvas.width = that.curCanvasCSSWh.width
+      canvas.height = that.curCanvasCSSWh.height
+      canvas.style.width = that.curCanvasCSSWh.styleWidth + 'px'
+      canvas.style.height = that.curCanvasCSSWh.styleHeight + 'px'
+      // canvas.style['border'] = '#d6d6d6 solid 1px'
+      canvas.style.margin = '0 0 9px 0'
+    },
+    pageRender(page, ctx) {
+      return page.render({
+        canvasContext: ctx,
+        transform: this.transform,
+        viewport: this.viewport,
+        enableWebGL: false,
+        renderInteractiveForms: false
+      })
+    },
+
+    drawBorder(canvas, ctx) {
+      ctx.save()
+      ctx.fillStyle = 'rgb(255, 255, 255)'
+      ctx.strokeRect(0, 0, canvas.width, canvas.height)
+      ctx.restore()
+    },
+    getCanvasCSSWH() {
+      let outputScale = {
+        sx: this.pixelRatio,
+        sy: this.pixelRatio,
+        scaled: this.pixelRatio !== 1
+      }
+
+      let pixelsInViewport = this.viewport.width * this.viewport.height
+      let maxScale = Math.sqrt(maxCanvasPixels / pixelsInViewport)
+
+      if (outputScale.sx > maxScale || outputScale.sy > maxScale) {
+        // 这里触发会出错
+        // outputScale.sx = maxScale;
+        // outputScale.sy = maxScale;
+        // outputScale.scaled = true;
+      }
+
+      let sfx = (0, this.approximateFraction)(outputScale.sx)
+      let sfy = (0, this.approximateFraction)(outputScale.sy)
+      const width = (0, this.roundToDivide)(this.viewport.width * outputScale.sx, sfx[0])
+      const height = (0, this.roundToDivide)(this.viewport.height * outputScale.sy, sfy[0])
+      const styleWidth = (0, this.roundToDivide)(this.viewport.width, sfx[1])
+      const styleHeight = (0, this.roundToDivide)(this.viewport.height, sfy[1])
+
+      if (this.pixelRatio !== 1) this.transform = [this.pixelRatio, 0, 0, this.pixelRatio, 0, 0]
+
+      this.viewWidth = styleWidth + 2
+      // 12 加上 canvas border margin 误差？2 + 9 + 1
+      // this.viewHeight = this.totallPage * (this.viewport.height + 12) + 9
+      console.debug('totalPageCount',this.totalPageCount)
+      this.viewHeight = `${(this.totalPageCount * (this.viewport.height  + this.PAGE_INTVERVAL))  + this.PAGE_INTVERVAL}`
+      console.debug('viewHeight',this.viewHeight,this.totallPage)
+      this.curCanvasCSSWh = { width, height, styleWidth, styleHeight }
+      return this.curCanvasCSSWh
+    },
+    approximateFraction(x) {
+      if (Math.floor(x) === x) {
+        return [x, 1]
+      }
+
+      var xinv = 1 / x
+      var limit = 8
+
+      if (xinv > limit) {
+        return [1, limit]
+      } else if (Math.floor(xinv) === xinv) {
+        return [1, xinv]
+      }
+
+      var x_ = x > 1 ? xinv : x
+      var a = 0,
+          b = 1,
+          c = 1,
+          d = 1
+      // eslint-disable-next-line
+      while (true) {
+        var p = a + c,
+            q = b + d
+
+        if (q > limit) {
+          break
+        }
+
+        if (x_ <= p / q) {
+          c = p
+          d = q
+        } else {
+          a = p
+          b = q
+        }
+      }
+
+      var result
+
+      if (x_ - a / b < c / d - x_) {
+        result = x_ === x ? [a, b] : [b, a]
+      } else {
+        result = x_ === x ? [c, d] : [d, c]
+      }
+
+      return result
+    },
+    roundToDivide(x, div) {
+      var r = x % div
+      return r === 0 ? x : Math.round(x - r + div)
+    },
+
+    initView(page, ctx) {
+      let devicePixelRatio = window.devicePixelRatio || 1
+      let backingStoreRatio =
+          ctx.webkitBackingStorePixelRatio ||
+          ctx.mozBackingStorePixelRatio ||
+          ctx.msBackingStorePixelRatio ||
+          ctx.oBackingStorePixelRatio ||
+          ctx.backingStorePixelRatio ||
+          1
+      this.pixelRatio = devicePixelRatio / backingStoreRatio
+
+      this.viewport = page.getViewport({
+        scale: CSS_UNITS
+      })
+
+      this.pageScale = (this.areaWidth - autoWidth) / this.viewport.width
+      let curViewport = page.getViewport({
+        scale: this.pageScale * CSS_UNITS
+      })
+      this.viewport = curViewport
+
+      this.isFirstTimeRender = false
+    },
+    pdfScroll (e) {
+      if(this.preViewType !== 'pdf' || this.isTouchMoved) {
+        return
+      }
+      if(this.scrollTop != e.target.scrollTop) {
+        this.scrollTop = e.target.scrollTop
+        this.debounceScrollPdf(e, this)
+      }
+    },
+    // 这里加了防抖保证不会一次产生过多请求
+    debounceScrollPdf: _.debounce(async function (e, that) {
+      if (that.fisrtLoad) {
+        that.fisrtLoad = false
+        return
+      }
+      const scrollTop = e.target.scrollTop;
+      const height = e.target.clientHeight;
+      let startNum = 0;
+      let endNum = 0;
+      // if (scrollTop + height == scrollHeight){
+      //   console.debug('=====',that.pages)
+      //   for (let i = 0 ;i< that.pages.length; i++){
+      //     if (!that.pages[i].loadStatus){
+      //       console.debug('loadStatus',that.pages[i])
+      //       const loadingState =  await that.getPDF(that.pages[i].pageNo);
+      //       if (loadingState === 'success'){
+      //         that.initRenderOneByOne(that.pages[i].pageNo)
+      //       }
+      //       // that.renderPages(that.pages[i].pageNo)
+      //       break
+      //     }
+      //   }
+      // }
+      startNum = Math.ceil(scrollTop / (that.viewport.height + that.PAGE_INTVERVAL))
+      endNum =  startNum +  Math.ceil(height / (that.viewport.height  + that.PAGE_INTVERVAL))
+      console.debug('scrollTop',scrollTop,that.viewport.height,startNum,endNum)
+      if (startNum > 1){
+        // for (let pageIndex = startNum; pageIndex < endNum; pageIndex++) {
+        //   if(pageIndex > 0 && pageIndex <= that.pages.length) {
+        //     console.debug('startNum',scrollTop,startNum,endNum,height,that.curCanvasCSSWh)
+        //     const loadingState =  await that.getPDF(pageIndex);
+        //     if (loadingState === 'success') {
+        //       // that.renderPages(pageIndex + 1)
+        //       that.initRenderOneByOne(pageIndex)
+        //       // this.initTouch()
+        //     } else that.boxEl.innerText = loadingState
+        //   }
+        // }
+      }
+    }, 200),
+    renderHighlights(){
+      let lineHeightDom = Array.from(document.getElementsByClassName('rectdom'))
+      if (lineHeightDom) {
+        lineHeightDom.forEach((d) => {
+          for (let i = 0; i < d.children.length; i++) {
+            if (d.getAttribute('react-count') == this.currentPage) {
+              d.children[i].style.backgroundColor = 'rgba(255, 136, 0, 0.3)'
+              d.children[i].classList.add('animation')
+              setTimeout(() =>{
+                d.children[i].classList.remove('animation')
+              }, 4000)
+            } else {
+              d.children[i].style.backgroundColor = 'rgba(54, 106, 255, 0.3)'
+              d.children[i].classList.remove('animation')
+            }
+          }
+        })
+      }
+    }
+  },
+  watch:{
+    tagIds: {
+      handler(value) {
+        console.debug('tagIds',value)
+        if(value && value.length) {
+          // 在 pdf_view 下创建 所有canvs的容器
+          this.contentView = document.createElement('div')
+          this.contentView.style.transformOrigin = '0px 0px 0px'
+          this.$http.get('/knowledge-api/knowledge/knowledge-part-location-info/list?ids=' + value.join(',')).then(res =>{
+            if (res.data.code == 0) {
+              // tagIds 会按照gpt识别的生成有序的数组，前端直接按照下标的顺序取就可以了
+              // 缓存拿到的所有数据
+              this.cachePdf = res.data.data
+              console.debug('res',res.data.data[0])
+              let publicPageFileUrl = res.data.data[0].publicPageFileUrl
+              this.currentPage = 0;
+              this.pdfUrl = res.data.data[0].publicPageFileUrl.substring(0, res.data.data[0].publicPageFileUrl.lastIndexOf('/') + 1)
+              if (publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')) === '.pdf') {
+                this.preViewType = 'pdf'
+                // this.setPageAllLine(this.cachePdf)
+                this.init(res.data.data[0])
+              } else {
+                this.preViewType = 'excal'
+                this.$http.post(
+                    '/knowledge-api/temporary-certificate/or-origin?expired=30',
+                    publicPageFileUrl,
+                    {
+                      headers: {
+                        "Content-Type": "application/json",
+                      },
+                    }).then(res => {
+                  // 使用原声请求方式 axios会带有不需要的请求头
+                  let xhr = new XMLHttpRequest();
+                  xhr.open('GET', res.data || res.bodyText , true);
+                  // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
+                  xhr.onload = ({ currentTarget }) => {
+                    // 请求完成
+                    if (currentTarget.status === 200) {   // 返回200
+                      this.contentView.innerHTML = currentTarget.response
+                      this.contentView.style.padding = '10px'
+                      // this.contentView.style.position = 'relative'
+                      this.$refs.pdfView.style.backgroundColor = '#FFFFFF'
+                      this.$refs.pdfView.appendChild(this.contentView)
+                      let allTr = Array.from(this.$refs.pdfView.getElementsByTagName('tr'))
+                      this.allTr = []
+                      for (let index = 0; index < allTr.length; index++) {
+                        if(value.includes(allTr[index].getAttribute('tag-id'))) {
+                          this.allTr.push(allTr[index])
+                        }
+                      }
+                      this.currentChange(1)
+
+                    }
+                  }
+                  xhr.send();
+                })
+              }
+            } else {
+              let div = document.createElement('div')
+              div.innerText = '文件加载异常'
+              this.contentView.appendChild(div)
+              this.$refs.pdfView.appendChild(this.contentView)
+            }
+          })
+        }
+      },
+      deep:true,
+      immediate:true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pdf-touch-box {
+  padding: 9px;
+  width: calc(100% - 18px);
+  height: calc(100% - 18px);
+  position: relative;
+  overflow: auto;
+}
+.scale-btn-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 44px;
+  display: flex;
+  justify-content: space-around;
+  z-index: 99;
+}
+.scale-btn-box::after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background: #fff;
+  top: 0;
+  left: 0;
+  filter: blur(18px);
+  opacity: 0.8;
+}
+.scale-btn {
+  position: relative;
+  z-index: 2;
+  width: 25%;
+  height: 100%;
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  color: #606266;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: none;
+  margin: 0;
+  transition: 0.1s;
+  font-weight: 500;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  padding: 12px 20px;
+  font-size: 14px;
+  border-radius: 4px;
+}
+.pdf-canvas-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  /*margin-top: 44px;*/
+  padding-top: 9px;
+  /*height: 100%;*/
+  /*overflow-y: scroll;*/
+  /*position: absolute;*/
+}
+.pdf-canvas-tips {
+  margin-top: 44px;
+}
+</style>