askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/newPdfPosition.vue

@@ -1,878 +0,0 @@
-<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>