askbot-dragon 1.4.1 → 1.4.2

package/src/components/pdfPosition.vue

@@ -1,830 +1,830 @@
-<template>
-  <div class="pdf_view" ref="pdfView" @scroll="pdfScroll">
-        <div class="btn_footer" v-if="tagIds.length > 1">
-            <div class="prev" @click="prev">上一段</div>
-            <div class="next" @click="next">下一段</div> 
-        </div>
-  </div>
-</template>
-
-<script>
-import _ from 'lodash'
-// import * as pdfjsLib from 'pdfjs-dist'
-// pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker';
-// import { TextLayerBuilder }  from "pdfjs-dist/web/pdf_viewer";
-// EventBus pdf_viewer 支持绑定自定义事件，一版不做
-// import 'pdfjs-dist/web/pdf_viewer.css'
-/* eslint-disable */
-const pdfjsLib = window['pdfjsLib']
-if(pdfjsLib) {
-    pdfjsLib.GlobalWorkerOptions.workerSrc = window['pdfjs-dist/build/pdf.worker'] 
-    // 'pdfjs-dist/build/pdf.worker';
-}
-const { TextLayerBuilder } = window['pdfjs-dist/web/pdf_viewer']
-// import { zoomElement } from '../assets/js/hammer'
-export default {
-    name: 'pdfView',
-    props:['tagIds','isMessageRecord'],
-    data() {
-        return {
-            url: '',
-            // pdfjsLib: window['pdfjs-dist/build/pdf'],
-            // pdfjsLib: pdfjsLib,
-            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,
-        }
-    },
-    methods: {
-        getpdfResloutePage (pdfResloute) {
-            // 根据当前页面宽度设置缩放比例
-            // this.scale = Math.round(this.$refs.pdfView.clientWidth / pdfResloute.pageWidth * 100) / 100
-            // console.log(this.scale,'this.scale');
-            if(this.isMessageRecord) {
-                this.scale = Math.round(this.$refs.pdfView.clientWidth / pdfResloute.pageWidth * 100) / 100
-            } else {
-                this.scale = 1
-            }
-            // 从后端获取到当前分片后所有的pdf页码，初始化数组，数组下{} 对应每页pdf文件
-            this.pdfUrl = pdfResloute.publicPageFileUrl.substring(0, pdfResloute.publicPageFileUrl.lastIndexOf('/') + 1)
-            this.initPages(pdfResloute.total)
-            // 定位功能，加载对应页码位置
-            this.loadPdfData(pdfResloute.page)
-        },
-        async loadPdfData (loadPage) {  
-            if(this.pages[loadPage - 1] && this.pages[loadPage - 1].dom && this.pages[loadPage - 1].dom.children.length > 0) {
-                return
-            }
-            // pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js");
-            // 拿到第一个分片
-            const { startPage, url } = await this.fetchPdfFragment(loadPage);
-            let loadingTask = pdfjsLib.getDocument(url)
-            loadingTask.promise.then((pdfDoc) => {
-                // 将已经下载的分片保存到 pages 数组中
-                for (let i = 0; i < pdfDoc.numPages; i += 1) {
-                    const pageIndex = startPage + i;
-                    const page = this.pages[pageIndex - 1];
-                    // 不在缓存列表内，重新获取本页pdf
-                    if (page.loadStatus !== this.pageLoadStatus.LOADED) {
-                        pdfDoc.getPage(i + 1).then((pdfPage) => {
-                            page.pdfPage = pdfPage;
-                            page.loadStatus = this.pageLoadStatus.LOADED;
-                            // 通知可以进行渲染了
-                            this.startRenderPages(pdfPage, page, pageIndex)
-                        });
-                    } else {
-                        if (this.changetoolbar) {
-                            this.$nextTick(() => {
-                                this.renderHighlights()
-                            })
-                            this.changetoolbar = false
-                        }
-                    }
-                }
-            });
-        },
-        initPages (totalPage) {
-            // const pages = [];
-            this.totalPageCount = totalPage
-            for (let i = 0; i < totalPage; i += 1) {
-                this.pages.push({
-                    pageNo: i + 1,
-                    loadStatus: this.pageLoadStatus.WAIT,
-                    pdfPage: null,
-                    dom: null
-                });
-            }
-        },
-        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
-        },
-        startRenderPages (pdfPage, page, pageIndex) {
-            const viewport = pdfPage.getViewport({
-                scale: this.scale, // 缩放的比例
-                rotation: this.rotation, // 旋转的角度
-            });
-            // 记录pdf页面高度
-            const pageSize = {
-                width: viewport.width,
-                height: viewport.height,
-            }
-            this.pageSize = pageSize
-            // 创建内容绘制区，并设置大小
-            if(this.$refs.pdfView.clientWidth / this.pageSize.width >= 1 || this.isMessageRecord) {
-                this.contentView.style.width = `${pageSize.width }px`;
-                this.contentView.style.height = `${(this.totalPageCount * (pageSize.height + this.PAGE_INTVERVAL))  + this.PAGE_INTVERVAL}px`;
-            } else {
-                this.transformSalce = this.$refs.pdfView.clientWidth / this.pageSize.width
-                this.contentView.style.width = `${pageSize.width * this.transformSalce}px`;
-                this.contentView.style.height = `${(this.totalPageCount * (pageSize.height * (this.transformSalce) + this.PAGE_INTVERVAL))   + this.PAGE_INTVERVAL}px`;     
-            }
-            this.contentView.style.margin = '0 auto 0'
-            console.log(this.transformSalce);
-            this.contentView.style.position = 'relative'
-            this.contentView.style.paddingBottom = '60px'
-            // contentView.style.overflowY = 'auto'
-            this.$refs.pdfView.appendChild(this.contentView);
-            this.renderPages(pageIndex)
-        },
-        renderPageContent (page, pageIndex) {
-            const { pdfPage, pageNo, dom } = page;
-            // dom 元素已存在，无须重新渲染，直接返回
-            console.log(dom, 'dom');
-            if (dom && dom.children.length != 0) {
-                return;
-            }
-            const viewport = pdfPage.getViewport({
-                scale: this.scale,
-                rotation: this.rotation,
-            });
-            // 创建新的canvas
-            const canvas = document.createElement('canvas');
-            const context = canvas.getContext('2d');
-            // canvas.getContext('2d');
-            canvas.height = this.pageSize.height;
-            canvas.width = this.pageSize.width;
-            // 创建渲染的dom
-            const pageDom = document.createElement('div');
-            pageDom.style.position = 'absolute';
-            pageDom.style.top = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
-            pageDom.style.width = `${this.pageSize.width}px`;
-            pageDom.style.height = `${this.pageSize.height}px`;
-            pageDom.appendChild(canvas);
-            // 渲染内容
-            let renderContext = {
-                canvasContext: context,
-                viewport: viewport,
-            }
-            pdfPage.render(renderContext).promise.then(() => {
-                console.log(pdfPage.getTextContent(), 'getTextContent');
-                return pdfPage.getTextContent()
-            }).then((textContent) => {
-                const textLayerDiv = document.createElement('div');
-                textLayerDiv.setAttribute('class', 'textLayer');
-                // 将文本图层div添加至每页pdf的div中
-                // 创建新的TextLayerBuilder实例
-                let textLayer = new TextLayerBuilder({
-                    textLayerDiv: textLayerDiv,
-                    pageIndex: pdfPage._pageIndex,
-                    viewport: viewport,
-                });
-                let findPage = this.currentPageAllLine.find(l => { return l.page == pageIndex })
-                if (findPage) {
-                    let AllLines = findPage.allLines
-                    // setTimeout(() => {
-                    if (AllLines.length > 0) {
-                        for (let j = 0; j < AllLines.length; j++) {
-                            let lines = AllLines[j].lines
-                            let rectdom = document.createElement('div')
-                            rectdom.setAttribute('react-count', AllLines[j].pageCount);
-                            rectdom.style.position = 'absolute';
-                            rectdom.style.top = 0
-                            rectdom.style.left = 0
-                            rectdom.classList.add('rectdom')
-                            for (let index = 0; index < lines.length; index++) {
-                                if (!/^\s+$/g.test(lines[index].content)) {
-                                    let postionArr = lines[index].location
-                                    let div = document.createElement('div')
-                                    div.style.position = 'absolute';
-                                    div.style.left = postionArr[0] * this.scale + 'px',
-                                    // 后端返回的坐标有基线对齐的问题，top 值是后端算好（基线top - 文字高度），在此加上文字高度的 1/9 （大致比例）为实际展示出文字的top值
-                                    div.style.top = (postionArr[1] + postionArr[3] / 9) * this.scale + 'px'
-                                    div.style.height = postionArr[3] * this.scale + 'px';
-                                    div.style.width = postionArr[2] * this.scale + 'px'
-                                    div.style.backgroundColor = 'rgba(54, 106, 255, 0.3)'
-                                    div.classList.add('lineHeight')
-                                    rectdom.appendChild(div)
-                                }
-                            }
-                            if (rectdom.children.length > 0) {
-                                pageDom.appendChild(rectdom)
-                            }
-                        }
-                    }
-                }
-                textLayer.setTextContent(textContent);
-                textLayer.render()
-                pageDom.appendChild(textLayer.textLayerDiv);
-                page.dom = pageDom;
-                this.contentView.appendChild(pageDom);
-                if(this.transformSalce !== null) {
-                    this.contentView.style.transform = `scale(${this.transformSalce}, ${this.transformSalce})`
-                }
-                if (this.changetoolbar) {
-                    setTimeout(() => {
-                        this.renderHighlights()
-                        this.changetoolbar = false
-                    }, 100)
-                }
-                if (this.fisrtLoad) {
-                    setTimeout(() => {
-                        // (this.pageSize.height + this.PAGE_INTVERVAL)
-                        if (this.$refs.pdfView.clientHeight - (this.pageSize.height + this.PAGE_INTVERVAL) > 0 ) {
-                            let loadNum = Math.ceil(this.$refs.pdfView.clientHeight / (this.pageSize.height + this.PAGE_INTVERVAL))
-                            for (let n = 0; n < loadNum; n++) {
-                                this.loadPdfData(pageNo + n)
-                            }
-                        } else {
-                            this.renderHighlights()
-                        }
-                        if(this.transformSalce !== null) {
-                            if (this.$refs.pdfView.scrollTop == Math.floor((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) * this.transformSalce ) {
-                                this.fisrtLoad = false
-                            } else {
-                                this.$refs.pdfView.scrollTop = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce)}`
-                                this.renderHighlights()
-                            }
-                        } else {
-                            if (this.$refs.pdfView.scrollTop == Math.floor((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))) {
-                                this.fisrtLoad = false
-                            } else {
-                                this.$refs.pdfView.scrollTop = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))}`
-                                this.renderHighlights()
-
-                            }
-                        }
-                        // zoomElement(this.contentView)
-                    }, 100)
-                }
-            })
-        },
-        // 监听容器的滚动事件，触发 scrollPdf 方法
-        // 这里加了防抖保证不会一次产生过多请求
-        debounceScrollPdf: _.debounce(function (e, that) {
-            if (this.fisrtLoad) {
-                this.fisrtLoad = false
-                return
-            }
-            const scrollTop = e.target.scrollTop;
-            const height = e.target.clientHeight;
-            // 根据内容可视区域中心点计算页码, 没有滚动时，指向第一页
-            const pageIndex = scrollTop > 0 ?
-                Math.ceil((scrollTop + (height / 2)) / (that.pageSize.height + that.PAGE_INTVERVAL)) :
-                1;
-            
-            pageIndex - 1 != 0 && that.loadPdfData(pageIndex - 1)
-            that.loadPdfData(pageIndex)
-            pageIndex + 1 <= that.totalPageCount && that.loadPdfData(pageIndex + 1)
-        }, 200),
-        directScrolling (e, that) {
-            if (this.fisrtLoad) {
-                this.fisrtLoad = false
-                return
-            }
-            const scrollTop = e.target.scrollTop;
-            const height = e.target.clientHeight;
-            // 根据内容可视区域中心点计算页码, 没有滚动时，指向第一页
-            const pageIndex = scrollTop > 0 ?
-                Math.ceil((scrollTop + (height / 2)) / (that.pageSize.height + that.PAGE_INTVERVAL)) :
-                1;
-            this.loadPdfData(pageIndex)
-        },
-        pdfScroll (e) {
-            if(this.preViewType !== 'pdf' || this.isTouchMoved) {
-                return
-            }
-            this.debounceScrollPdf(e, this)
-        },
-        // 分片每次只做一次处理，所以不考虑多片情况
-        loadBefore (pageIndex) {
-            this.loadPdfData(pageIndex)
-            // const start = (Math.floor(pageIndex / this.SLICE_COUNT) * this.SLICE_COUNT) - (this.SLICE_COUNT - 1);
-            // if (start > 0) {
-            //     // const prevPage = this.pages[start - 1] || {};
-            //     this.loadPdfData(start)
-            //     // prevPage.loadStatus === this.pageLoadStatus.WAIT && this.loadPdfData(start);
-            // }
-        },
-        loadAfter (pageIndex) {
-            this.loadPdfData(pageIndex)
-            // const start = (Math.floor(pageIndex / this.SLICE_COUNT) * this.SLICE_COUNT) + 1;
-            // if (start <= this.pages.length) {
-            //     // const nextPage = this.pages[start - 1] || {};
-            //     this.loadPdfData(start)
-            //     // nextPage.loadStatus === this.pageLoadStatus.WAIT && this.loadPdfData(start);
-            // }
-        },
-        // 首先我们获取到需要渲染的范围
-        // 根据当前的可视范围内的页码，我们前后只保留 8 页
-        getRenderScope (pageIndex) {
-            const pagesToRender = [];
-            let i = pageIndex - 1;
-            let j = pageIndex + 1;
-            // pageIndex - 1 表示当前页码数 对应的下标位置
-            pagesToRender.push(this.pages[pageIndex - 1]);
-            while (pagesToRender.length < 10 && pagesToRender.length < this.pages.length) {
-                if (i > 0) {
-                    pagesToRender.push(this.pages[i - 1]);
-                    i -= 1;
-                }
-                if (pagesToRender.length >= 10) {
-                    break;
-                }
-                if (j <= this.pages.length) {
-                    pagesToRender.push(this.pages[j - 1]);
-                    j += 1;
-                }
-            }
-            return pagesToRender;
-        },
-        // 渲染需要展示的页面，不需展示的页码将其清除
-        renderPages (pageIndex) {
-            const pagesToRender = this.getRenderScope(pageIndex);
-            for (const i of this.pages) {
-                if (pagesToRender.includes(i)) {
-                    i.loadStatus === this.pageLoadStatus.LOADED ?
-                        this.renderPageContent(i, pageIndex) :
-                        this.renderPageLoading(i);
-                } else {
-                    this.clearPage(i);
-                }
-            }
-        },
-        // 清除页面 dom
-        clearPage (page) {
-            if (page.dom) {
-                this.contentView.removeChild(page.dom);
-                page.loadStatus = 0
-                page.dom = undefined;
-            }
-        },
-        // 页面正在下载时渲染loading视图
-        renderPageLoading (page) {
-            const { pageNo, dom } = page;
-            if (dom && dom.children.length != 0) {
-                return;
-            }
-            const pageDom = document.createElement('div');
-            pageDom.style.width = `${this.pageSize.width}px`;
-            pageDom.style.height = `${this.pageSize.height}px`;
-            pageDom.style.position = 'absolute';
-            pageDom.style.top = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL
-                }px`;
-            pageDom.style.backgroundImage = `url('https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif')`
-            pageDom.style.backgroundPosition = 'center'
-            pageDom.style.backgroundRepeat = 'no-repeat'
-            pageDom.style.backgroundColor = '#FFF'
-            page.dom = pageDom;
-            this.contentView.appendChild(pageDom);
-        },
-        prev () {
-            this.currentPage--
-            if (this.currentPage < 0) {
-                // this.currentPage = this.tagIds.length - 1
-                this.currentPage = 0
-            }
-            if(this.preViewType == 'pdf') {
-                this.scrollToUplaodePage(this.currentPage)
-            } else {
-                this.scrollToExcalTop(this.currentPage)
-            }
-            // this.getpdfResloutePage(this.cachePdf[this.currentPage - 1])
-        },
-        next () {
-            this.currentPage++
-            if (this.currentPage >= this.tagIds.length) {
-                this.currentPage = this.tagIds.length - 1
-            }
-            if(this.preViewType == 'pdf') {
-                this.scrollToUplaodePage(this.currentPage)
-            } else {
-                this.scrollToExcalTop(this.currentPage)
-            }
-        },
-        currentChange (value) {
-            this.currentPage = value - 1
-            if(this.preViewType == 'pdf') {
-                this.scrollToUplaodePage(this.currentPage)
-            } else {
-                this.scrollToExcalTop(this.currentPage)
-            }
-        },
-        scrollToUplaodePage (currentPage) {
-            this.changetoolbar = true
-            if(this.preViewType !== 'pdf') {
-                return
-            }
-            let pdfResloute = this.cachePdf[currentPage]
-            this.identifyTextPostion.extractInfo = pdfResloute.extractInfo
-            this.identifyTextPostion.left = pdfResloute.extractInfo.location[0]
-            this.identifyTextPostion.top = pdfResloute.extractInfo.location[1]
-            this.identifyTextPostion.width = pdfResloute.extractInfo.location[2]
-            this.identifyTextPostion.height = pdfResloute.extractInfo.location[3]
-            this.identifyTextPostion.page = pdfResloute.page
-            this.identifyTextPostion.pageHeight = pdfResloute.pageHeight
-            this.identifyTextPostion.pageWidth = pdfResloute.pageWidth
-            // 在当前段落在最后一页pdf时，根据计算的高度并不能触发滚动，在此执行重新渲染方法，非次情况会执行两次，待优化
-            this.$nextTick(() => {
-                this.renderHighlights()
-            })
-            if(this.transformSalce !== null) {
-                this.$refs.pdfView.scrollTop = `${((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce)}`
-            } else {
-                this.$refs.pdfView.scrollTop = `${((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))}`
-            }
-        },
-        scrollToExcalTop(currentPage) {
-            for (let index = 0; index < this.allTr.length; index++) {
-                if(index == currentPage) {
-                    Array.from(this.allTr[index].children).forEach(item =>{
-                        item.style.background = 'rgba(255, 136, 0, 0.6)'
-                    })
-                    // this.$refs.pdfView.scrollTop = this.allTr[index].offsetTop
-                    this.$refs.pdfView.scrollTop = this.allTr[index].getBoundingClientRect().top
-                    
-                } else {
-                    Array.from(this.allTr[index].children).forEach(item =>{
-                        item.style.background = 'rgba(54, 106, 255, 0.6)'
-                    })
-                }
-            }
-        },
-        // pdf是否需要重新渲染高亮位置
-        renderHighlights () {
-            let lineHeightDom = Array.from(document.getElementsByClassName('rectdom'))
-            console.log(lineHeightDom, this.currentPage, 'this.currentPage');
-            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)'
-                        } else {
-                            d.children[i].style.backgroundColor = 'rgba(54, 106, 255, 0.3)'
-                        }
-                    }
-                })
-            }
-        },
-        displayHiglight (pageIndex) {
-            let lineHeightDom = Array.from(document.getElementsByClassName('rectdom'))
-            if (lineHeightDom) {
-                lineHeightDom.forEach((d) => {
-                    if (d.getAttribute('page-index') == pageIndex) {
-                        d.style.display = 'none'
-                    }
-                })
-            }
-        },
-        // 前端暂时缓存多页
-        autoLoadMore (pageIndex) {
-            let pdfResloute = this.cachePdf.find(cache => {
-                return cache.page == pageIndex
-            })
-            if (pdfResloute) {
-                this.getpdfResloutePage(pdfResloute)
-            } else {
-                this.loadPdfData(pageIndex)
-            }
-        },
-        setPageAllLine (arr) {
-            this.currentPageAllLine = []
-            arr.forEach((item, index) => {
-                let i = this.currentPageAllLine.findIndex(l => { return l.page && l.page == item.page })
-                if (i != -1) {
-                    // this.currentPageAllLine[i].allLines.lines.push(item.extractInfo.lines)
-                    this.currentPageAllLine[i].allLines.push({
-                        pageCount: index,
-                        lines: item.extractInfo.lines
-                    })
-                } else {
-                    this.currentPageAllLine.push({
-                        page: item.page,
-                        allLines: [{
-                            pageCount: index,
-                            lines: item.extractInfo.lines
-                        }],
-                    })
-                }
-            })
-        },
-        openTouch() {
-            // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行
-            let that = this;
-            this.$nextTick(() => {
-                // setInterval(() => {
-                //     this.scale = this.scale + 0.1
-                //     that.pages.forEach((item, index) =>{
-                //             if(item.dom) {
-                //                 item.dom.children.forEach( childDom =>{
-                //                     if(childDom.getAttribute('react-count')) {
-                //                         childDom.style.transform = "scale(" +  this.scale + ")";
-                //                         childDom.style.transformOrigin = "0px 0px 0px";
-                //                     } else {
-                //                         item.dom = null
-                //                         this.startRenderPages(item.pdfPage, null, index)
-                //                     }
-                //                 } )
-                //             }
-                //         })
-                // }, 100);
-                // 获取放大或缩小的区域DOM
-                let matrix_box = this.contentView
-                matrix_box.addEventListener("touchstart", function (event) {
-                    this.isTouchMoved = true
-                    let touches = event.touches;
-                    let events = touches[0];
-                    let events2 = touches[1];
-
-                    // event.preventDefault();
-
-                    // 第一个触摸点的坐标
-                    that.displacement.pageX = events.pageX;
-                    that.displacement.pageY = events.pageY;
-
-                    that.displacement.moveable = true;
-
-                    if (events2) {
-                        that.displacement.pageX2 = events2.pageX;
-                        that.displacement.pageY2 = events2.pageY;
-                    }
-
-                    that.displacement.originScale = this.scale || 1;
-                    // console.log(that.displacement);
-                });
-                document.addEventListener("touchmove", function (event) {
-                    if (!that.displacement.moveable) {
-                        return;
-                    }
-                    // event.preventDefault();
-                    let touches = event.touches;
-                    let events = touches[0];
-                    let events2 = touches[1];
-                    // 双指移动
-                    if (events2) {
-                        // 第2个指头坐标在touchmove时候获取
-                        if (!that.displacement.pageX2) {
-                            that.displacement.pageX2 = events2.pageX;
-                        }
-                        if (!that.displacement.pageY2) {
-                            that.displacement.pageY2 = events2.pageY;
-                        }
-                        // 双指缩放比例计算
-                        let zoom = that.getDistance({
-                                x: events.pageX,
-                                y: events.pageY
-                            },
-                                {
-                                    x: events2.pageX,
-                                    y: events2.pageY
-                                }
-                            ) / that.getDistance(
-                                {
-                                    x: that.displacement.pageX,
-                                    y: that.displacement.pageY
-                                },
-                                {
-                                    x: that.displacement.pageX2,
-                                    y: that.displacement.pageY2
-                                }
-                            );
-                        // 应用在元素上的缩放比例
-                        let newScale = that.displacement.originScale * zoom;
-                        console.log(zoom, newScale , this.scale, 'newScale');
-                        // 最大缩放比例限制
-                        if (newScale > 2) {
-                            newScale = 2;
-                        }
-                        // 最大缩放比例限制
-                        if(newScale < 1) {
-                            newScale = 1;
-                        }
-                        // 记住使用的缩放值
-                        that.displacement.scale = newScale;
-                        // console.log(newScale);
-                        matrix_box.style.transform = "scale(" + newScale + ")";
-                        // 设置旋转元素的基点位置
-                        matrix_box.style.transformOrigin = "0px 0px 0px";
-                    }
-                },{ passive: false });
-                document.addEventListener('touchend',function() {
-                    that.isTouchMoved = false
-                },{ passive: false })
-            });
-        },
-        getDistance(start, stop) {
-            // Math.hypot()计算参数的平方根
-            return Math.hypot(stop.x - start.x, stop.y - start.y);
-        },
-        setupCanvas(canvas, width, height) {
-            const dpr =  1;
-            // const rect = canvas.getBoundingClientRect();
-            canvas.width = width 
-            canvas.height = height 
-            const ctx = canvas.getContext('2d');
-            console.log(canvas.width, canvas.height, dpr, this.scale);
-            ctx?.scale(dpr, dpr );
-            return ctx;
-        },
-    },
-    computed:{
-        perviewUrl() {
-            return '/web/viewer.html?file=' + '/pdflist/pdf4split-1.pdf'
-        }
-    },
-    watch:{
-        tagIds: {
-            handler(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 =>{
-                        res.data = {"data":[{"id":"64591b7d8bb8ab1b91c65f24","knowledgeId":"64591a9c8da27649473f3b4b","mainId":"fb348d095c0b4fd7bbd37826563dac7d","page":3,"total":18,"pageHeight":540.0,"pageWidth":960.00946,"publicPageFileUrl":"https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/fb348d095c0b4fd7bbd37826563dac7d/2023/05/08/11/55/18/64591b638bb8ab1b91c65eed/3.pdf","extractInfo":{"location":[280.488,161.32,398.71573,61.99298],"content":"黄花城水长城旅游区位于北京市怀柔区九渡河镇境内，距北京市区65公里，是以奇而著称，融山川、碧水、古长城为一体的旅游休闲胜地。而这里的“三绝景”更是引人入","lines":[{"content":"黄花城水长城旅游区位于北京市怀柔区九渡河镇境内，距","location":[280.488,161.32,398.71573,15.9869995]},{"content":"北京市区65公里，是以奇而著称，融山川、碧水、古长","location":[283.691,184.30899,392.3055,15.9869995]},{"content":"城为一体的旅游休闲胜地。而这里的“三绝景”更是引人入","location":[282.699,207.32599,394.3033,15.9869995]}],"tagId":null}}],"code":"0","msg":null,"traceId":null}
-                        if (res.data.code == 0) {
-                            // tagIds 会按照gpt识别的生成有序的数组，前端直接按照下标的顺序取就可以了
-                            // 缓存拿到的所有数据
-                            this.cachePdf = res.data.data
-                            let publicPageFileUrl = res.data.data[0].publicPageFileUrl
-                            this.currentPage = 0
-                            // console.log(publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')));
-                            if (publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')) === '.pdf') {
-                                this.preViewType = 'pdf'
-                                this.setPageAllLine(this.cachePdf)
-                                this.getpdfResloutePage(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
-        }
-    },
-    mounted () {
-    }
-}
-</script>
-
-<style lang="less" scoped>
-.pdf_view {
-    width: 100%;
-    height: calc(100% - 51px);
-    overflow: auto;
-    background-color: #f5f7fb;
-    padding-bottom: 60px;
-    box-sizing: border-box;
-    // position: relative;
-    // > div {
-    //     width: 100%;
-    //     height: 100%;
-    //     overflow: hidden;
-    //     overflow-y: auto;
-    //     position: relative;
-    // }
-    > iframe {
-        width: 100%;
-        height: 100%;
-    }
-    a:link {
-        color: none;
-    }
-    a:visited {
-        color: none;
-    }
-    a:hover {
-        color: none;
-    }
-    a:active {
-        color: none;
-    }
-    .btn_footer {
-        width: 100%;
-        height: 60px;
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        position: absolute;
-        bottom: 0px;
-        left: 0;
-        z-index: 999;
-        background: #ffffff;
-        .prev, .next {
-            width: 35%;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 50px;
-            cursor: pointer;
-        }
-        .prev {
-            background: #F2F5FA;
-            color: #000;
-        }
-        .next {
-            background: #366aff;
-            color: #ffffff;
-        }
-    }
-}
+<template>
+  <div class="pdf_view" ref="pdfView" @scroll="pdfScroll">
+        <div class="btn_footer" v-if="tagIds.length > 1">
+            <div class="prev" @click="prev">上一段</div>
+            <div class="next" @click="next">下一段</div> 
+        </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+// import * as pdfjsLib from 'pdfjs-dist'
+// pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker';
+// import { TextLayerBuilder }  from "pdfjs-dist/web/pdf_viewer";
+// EventBus pdf_viewer 支持绑定自定义事件，一版不做
+// import 'pdfjs-dist/web/pdf_viewer.css'
+/* eslint-disable */
+const pdfjsLib = window['pdfjsLib']
+if(pdfjsLib) {
+    pdfjsLib.GlobalWorkerOptions.workerSrc = window['pdfjs-dist/build/pdf.worker'] 
+    // 'pdfjs-dist/build/pdf.worker';
+}
+const { TextLayerBuilder } = window['pdfjs-dist/web/pdf_viewer']
+// import { zoomElement } from '../assets/js/hammer'
+export default {
+    name: 'pdfView',
+    props:['tagIds','isMessageRecord'],
+    data() {
+        return {
+            url: '',
+            // pdfjsLib: window['pdfjs-dist/build/pdf'],
+            // pdfjsLib: pdfjsLib,
+            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,
+        }
+    },
+    methods: {
+        getpdfResloutePage (pdfResloute) {
+            // 根据当前页面宽度设置缩放比例
+            // this.scale = Math.round(this.$refs.pdfView.clientWidth / pdfResloute.pageWidth * 100) / 100
+            // console.log(this.scale,'this.scale');
+            if(this.isMessageRecord) {
+                this.scale = Math.round(this.$refs.pdfView.clientWidth / pdfResloute.pageWidth * 100) / 100
+            } else {
+                this.scale = 1
+            }
+            // 从后端获取到当前分片后所有的pdf页码，初始化数组，数组下{} 对应每页pdf文件
+            this.pdfUrl = pdfResloute.publicPageFileUrl.substring(0, pdfResloute.publicPageFileUrl.lastIndexOf('/') + 1)
+            this.initPages(pdfResloute.total)
+            // 定位功能，加载对应页码位置
+            this.loadPdfData(pdfResloute.page)
+        },
+        async loadPdfData (loadPage) {  
+            if(this.pages[loadPage - 1] && this.pages[loadPage - 1].dom && this.pages[loadPage - 1].dom.children.length > 0) {
+                return
+            }
+            // pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js");
+            // 拿到第一个分片
+            const { startPage, url } = await this.fetchPdfFragment(loadPage);
+            let loadingTask = pdfjsLib.getDocument(url)
+            loadingTask.promise.then((pdfDoc) => {
+                // 将已经下载的分片保存到 pages 数组中
+                for (let i = 0; i < pdfDoc.numPages; i += 1) {
+                    const pageIndex = startPage + i;
+                    const page = this.pages[pageIndex - 1];
+                    // 不在缓存列表内，重新获取本页pdf
+                    if (page.loadStatus !== this.pageLoadStatus.LOADED) {
+                        pdfDoc.getPage(i + 1).then((pdfPage) => {
+                            page.pdfPage = pdfPage;
+                            page.loadStatus = this.pageLoadStatus.LOADED;
+                            // 通知可以进行渲染了
+                            this.startRenderPages(pdfPage, page, pageIndex)
+                        });
+                    } else {
+                        if (this.changetoolbar) {
+                            this.$nextTick(() => {
+                                this.renderHighlights()
+                            })
+                            this.changetoolbar = false
+                        }
+                    }
+                }
+            });
+        },
+        initPages (totalPage) {
+            // const pages = [];
+            this.totalPageCount = totalPage
+            for (let i = 0; i < totalPage; i += 1) {
+                this.pages.push({
+                    pageNo: i + 1,
+                    loadStatus: this.pageLoadStatus.WAIT,
+                    pdfPage: null,
+                    dom: null
+                });
+            }
+        },
+        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
+        },
+        startRenderPages (pdfPage, page, pageIndex) {
+            const viewport = pdfPage.getViewport({
+                scale: this.scale, // 缩放的比例
+                rotation: this.rotation, // 旋转的角度
+            });
+            // 记录pdf页面高度
+            const pageSize = {
+                width: viewport.width,
+                height: viewport.height,
+            }
+            this.pageSize = pageSize
+            // 创建内容绘制区，并设置大小
+            if(this.$refs.pdfView.clientWidth / this.pageSize.width >= 1 || this.isMessageRecord) {
+                this.contentView.style.width = `${pageSize.width }px`;
+                this.contentView.style.height = `${(this.totalPageCount * (pageSize.height + this.PAGE_INTVERVAL))  + this.PAGE_INTVERVAL}px`;
+            } else {
+                this.transformSalce = this.$refs.pdfView.clientWidth / this.pageSize.width
+                this.contentView.style.width = `${pageSize.width * this.transformSalce}px`;
+                this.contentView.style.height = `${(this.totalPageCount * (pageSize.height * (this.transformSalce) + this.PAGE_INTVERVAL))   + this.PAGE_INTVERVAL}px`;     
+            }
+            this.contentView.style.margin = '0 auto 0'
+            console.log(this.transformSalce);
+            this.contentView.style.position = 'relative'
+            this.contentView.style.paddingBottom = '60px'
+            // contentView.style.overflowY = 'auto'
+            this.$refs.pdfView.appendChild(this.contentView);
+            this.renderPages(pageIndex)
+        },
+        renderPageContent (page, pageIndex) {
+            const { pdfPage, pageNo, dom } = page;
+            // dom 元素已存在，无须重新渲染，直接返回
+            console.log(dom, 'dom');
+            if (dom && dom.children.length != 0) {
+                return;
+            }
+            const viewport = pdfPage.getViewport({
+                scale: this.scale,
+                rotation: this.rotation,
+            });
+            // 创建新的canvas
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+            // canvas.getContext('2d');
+            canvas.height = this.pageSize.height;
+            canvas.width = this.pageSize.width;
+            // 创建渲染的dom
+            const pageDom = document.createElement('div');
+            pageDom.style.position = 'absolute';
+            pageDom.style.top = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
+            pageDom.style.width = `${this.pageSize.width}px`;
+            pageDom.style.height = `${this.pageSize.height}px`;
+            pageDom.appendChild(canvas);
+            // 渲染内容
+            let renderContext = {
+                canvasContext: context,
+                viewport: viewport,
+            }
+            pdfPage.render(renderContext).promise.then(() => {
+                console.log(pdfPage.getTextContent(), 'getTextContent');
+                return pdfPage.getTextContent()
+            }).then((textContent) => {
+                const textLayerDiv = document.createElement('div');
+                textLayerDiv.setAttribute('class', 'textLayer');
+                // 将文本图层div添加至每页pdf的div中
+                // 创建新的TextLayerBuilder实例
+                let textLayer = new TextLayerBuilder({
+                    textLayerDiv: textLayerDiv,
+                    pageIndex: pdfPage._pageIndex,
+                    viewport: viewport,
+                });
+                let findPage = this.currentPageAllLine.find(l => { return l.page == pageIndex })
+                if (findPage) {
+                    let AllLines = findPage.allLines
+                    // setTimeout(() => {
+                    if (AllLines.length > 0) {
+                        for (let j = 0; j < AllLines.length; j++) {
+                            let lines = AllLines[j].lines
+                            let rectdom = document.createElement('div')
+                            rectdom.setAttribute('react-count', AllLines[j].pageCount);
+                            rectdom.style.position = 'absolute';
+                            rectdom.style.top = 0
+                            rectdom.style.left = 0
+                            rectdom.classList.add('rectdom')
+                            for (let index = 0; index < lines.length; index++) {
+                                if (!/^\s+$/g.test(lines[index].content)) {
+                                    let postionArr = lines[index].location
+                                    let div = document.createElement('div')
+                                    div.style.position = 'absolute';
+                                    div.style.left = postionArr[0] * this.scale + 'px',
+                                    // 后端返回的坐标有基线对齐的问题，top 值是后端算好（基线top - 文字高度），在此加上文字高度的 1/9 （大致比例）为实际展示出文字的top值
+                                    div.style.top = (postionArr[1] + postionArr[3] / 9) * this.scale + 'px'
+                                    div.style.height = postionArr[3] * this.scale + 'px';
+                                    div.style.width = postionArr[2] * this.scale + 'px'
+                                    div.style.backgroundColor = 'rgba(54, 106, 255, 0.3)'
+                                    div.classList.add('lineHeight')
+                                    rectdom.appendChild(div)
+                                }
+                            }
+                            if (rectdom.children.length > 0) {
+                                pageDom.appendChild(rectdom)
+                            }
+                        }
+                    }
+                }
+                textLayer.setTextContent(textContent);
+                textLayer.render()
+                pageDom.appendChild(textLayer.textLayerDiv);
+                page.dom = pageDom;
+                this.contentView.appendChild(pageDom);
+                if(this.transformSalce !== null) {
+                    this.contentView.style.transform = `scale(${this.transformSalce}, ${this.transformSalce})`
+                }
+                if (this.changetoolbar) {
+                    setTimeout(() => {
+                        this.renderHighlights()
+                        this.changetoolbar = false
+                    }, 100)
+                }
+                if (this.fisrtLoad) {
+                    setTimeout(() => {
+                        // (this.pageSize.height + this.PAGE_INTVERVAL)
+                        if (this.$refs.pdfView.clientHeight - (this.pageSize.height + this.PAGE_INTVERVAL) > 0 ) {
+                            let loadNum = Math.ceil(this.$refs.pdfView.clientHeight / (this.pageSize.height + this.PAGE_INTVERVAL))
+                            for (let n = 0; n < loadNum; n++) {
+                                this.loadPdfData(pageNo + n)
+                            }
+                        } else {
+                            this.renderHighlights()
+                        }
+                        if(this.transformSalce !== null) {
+                            if (this.$refs.pdfView.scrollTop == Math.floor((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) * this.transformSalce ) {
+                                this.fisrtLoad = false
+                            } else {
+                                this.$refs.pdfView.scrollTop = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce)}`
+                                this.renderHighlights()
+                            }
+                        } else {
+                            if (this.$refs.pdfView.scrollTop == Math.floor((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))) {
+                                this.fisrtLoad = false
+                            } else {
+                                this.$refs.pdfView.scrollTop = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))}`
+                                this.renderHighlights()
+
+                            }
+                        }
+                        // zoomElement(this.contentView)
+                    }, 100)
+                }
+            })
+        },
+        // 监听容器的滚动事件，触发 scrollPdf 方法
+        // 这里加了防抖保证不会一次产生过多请求
+        debounceScrollPdf: _.debounce(function (e, that) {
+            if (this.fisrtLoad) {
+                this.fisrtLoad = false
+                return
+            }
+            const scrollTop = e.target.scrollTop;
+            const height = e.target.clientHeight;
+            // 根据内容可视区域中心点计算页码, 没有滚动时，指向第一页
+            const pageIndex = scrollTop > 0 ?
+                Math.ceil((scrollTop + (height / 2)) / (that.pageSize.height + that.PAGE_INTVERVAL)) :
+                1;
+            
+            pageIndex - 1 != 0 && that.loadPdfData(pageIndex - 1)
+            that.loadPdfData(pageIndex)
+            pageIndex + 1 <= that.totalPageCount && that.loadPdfData(pageIndex + 1)
+        }, 200),
+        directScrolling (e, that) {
+            if (this.fisrtLoad) {
+                this.fisrtLoad = false
+                return
+            }
+            const scrollTop = e.target.scrollTop;
+            const height = e.target.clientHeight;
+            // 根据内容可视区域中心点计算页码, 没有滚动时，指向第一页
+            const pageIndex = scrollTop > 0 ?
+                Math.ceil((scrollTop + (height / 2)) / (that.pageSize.height + that.PAGE_INTVERVAL)) :
+                1;
+            this.loadPdfData(pageIndex)
+        },
+        pdfScroll (e) {
+            if(this.preViewType !== 'pdf' || this.isTouchMoved) {
+                return
+            }
+            this.debounceScrollPdf(e, this)
+        },
+        // 分片每次只做一次处理，所以不考虑多片情况
+        loadBefore (pageIndex) {
+            this.loadPdfData(pageIndex)
+            // const start = (Math.floor(pageIndex / this.SLICE_COUNT) * this.SLICE_COUNT) - (this.SLICE_COUNT - 1);
+            // if (start > 0) {
+            //     // const prevPage = this.pages[start - 1] || {};
+            //     this.loadPdfData(start)
+            //     // prevPage.loadStatus === this.pageLoadStatus.WAIT && this.loadPdfData(start);
+            // }
+        },
+        loadAfter (pageIndex) {
+            this.loadPdfData(pageIndex)
+            // const start = (Math.floor(pageIndex / this.SLICE_COUNT) * this.SLICE_COUNT) + 1;
+            // if (start <= this.pages.length) {
+            //     // const nextPage = this.pages[start - 1] || {};
+            //     this.loadPdfData(start)
+            //     // nextPage.loadStatus === this.pageLoadStatus.WAIT && this.loadPdfData(start);
+            // }
+        },
+        // 首先我们获取到需要渲染的范围
+        // 根据当前的可视范围内的页码，我们前后只保留 8 页
+        getRenderScope (pageIndex) {
+            const pagesToRender = [];
+            let i = pageIndex - 1;
+            let j = pageIndex + 1;
+            // pageIndex - 1 表示当前页码数 对应的下标位置
+            pagesToRender.push(this.pages[pageIndex - 1]);
+            while (pagesToRender.length < 10 && pagesToRender.length < this.pages.length) {
+                if (i > 0) {
+                    pagesToRender.push(this.pages[i - 1]);
+                    i -= 1;
+                }
+                if (pagesToRender.length >= 10) {
+                    break;
+                }
+                if (j <= this.pages.length) {
+                    pagesToRender.push(this.pages[j - 1]);
+                    j += 1;
+                }
+            }
+            return pagesToRender;
+        },
+        // 渲染需要展示的页面，不需展示的页码将其清除
+        renderPages (pageIndex) {
+            const pagesToRender = this.getRenderScope(pageIndex);
+            for (const i of this.pages) {
+                if (pagesToRender.includes(i)) {
+                    i.loadStatus === this.pageLoadStatus.LOADED ?
+                        this.renderPageContent(i, pageIndex) :
+                        this.renderPageLoading(i);
+                } else {
+                    this.clearPage(i);
+                }
+            }
+        },
+        // 清除页面 dom
+        clearPage (page) {
+            if (page.dom) {
+                this.contentView.removeChild(page.dom);
+                page.loadStatus = 0
+                page.dom = undefined;
+            }
+        },
+        // 页面正在下载时渲染loading视图
+        renderPageLoading (page) {
+            const { pageNo, dom } = page;
+            if (dom && dom.children.length != 0) {
+                return;
+            }
+            const pageDom = document.createElement('div');
+            pageDom.style.width = `${this.pageSize.width}px`;
+            pageDom.style.height = `${this.pageSize.height}px`;
+            pageDom.style.position = 'absolute';
+            pageDom.style.top = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL
+                }px`;
+            pageDom.style.backgroundImage = `url('https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif')`
+            pageDom.style.backgroundPosition = 'center'
+            pageDom.style.backgroundRepeat = 'no-repeat'
+            pageDom.style.backgroundColor = '#FFF'
+            page.dom = pageDom;
+            this.contentView.appendChild(pageDom);
+        },
+        prev () {
+            this.currentPage--
+            if (this.currentPage < 0) {
+                // this.currentPage = this.tagIds.length - 1
+                this.currentPage = 0
+            }
+            if(this.preViewType == 'pdf') {
+                this.scrollToUplaodePage(this.currentPage)
+            } else {
+                this.scrollToExcalTop(this.currentPage)
+            }
+            // this.getpdfResloutePage(this.cachePdf[this.currentPage - 1])
+        },
+        next () {
+            this.currentPage++
+            if (this.currentPage >= this.tagIds.length) {
+                this.currentPage = this.tagIds.length - 1
+            }
+            if(this.preViewType == 'pdf') {
+                this.scrollToUplaodePage(this.currentPage)
+            } else {
+                this.scrollToExcalTop(this.currentPage)
+            }
+        },
+        currentChange (value) {
+            this.currentPage = value - 1
+            if(this.preViewType == 'pdf') {
+                this.scrollToUplaodePage(this.currentPage)
+            } else {
+                this.scrollToExcalTop(this.currentPage)
+            }
+        },
+        scrollToUplaodePage (currentPage) {
+            this.changetoolbar = true
+            if(this.preViewType !== 'pdf') {
+                return
+            }
+            let pdfResloute = this.cachePdf[currentPage]
+            this.identifyTextPostion.extractInfo = pdfResloute.extractInfo
+            this.identifyTextPostion.left = pdfResloute.extractInfo.location[0]
+            this.identifyTextPostion.top = pdfResloute.extractInfo.location[1]
+            this.identifyTextPostion.width = pdfResloute.extractInfo.location[2]
+            this.identifyTextPostion.height = pdfResloute.extractInfo.location[3]
+            this.identifyTextPostion.page = pdfResloute.page
+            this.identifyTextPostion.pageHeight = pdfResloute.pageHeight
+            this.identifyTextPostion.pageWidth = pdfResloute.pageWidth
+            // 在当前段落在最后一页pdf时，根据计算的高度并不能触发滚动，在此执行重新渲染方法，非次情况会执行两次，待优化
+            this.$nextTick(() => {
+                this.renderHighlights()
+            })
+            if(this.transformSalce !== null) {
+                this.$refs.pdfView.scrollTop = `${((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce)}`
+            } else {
+                this.$refs.pdfView.scrollTop = `${((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))}`
+            }
+        },
+        scrollToExcalTop(currentPage) {
+            for (let index = 0; index < this.allTr.length; index++) {
+                if(index == currentPage) {
+                    Array.from(this.allTr[index].children).forEach(item =>{
+                        item.style.background = 'rgba(255, 136, 0, 0.6)'
+                    })
+                    // this.$refs.pdfView.scrollTop = this.allTr[index].offsetTop
+                    this.$refs.pdfView.scrollTop = this.allTr[index].getBoundingClientRect().top
+                    
+                } else {
+                    Array.from(this.allTr[index].children).forEach(item =>{
+                        item.style.background = 'rgba(54, 106, 255, 0.6)'
+                    })
+                }
+            }
+        },
+        // pdf是否需要重新渲染高亮位置
+        renderHighlights () {
+            let lineHeightDom = Array.from(document.getElementsByClassName('rectdom'))
+            console.log(lineHeightDom, this.currentPage, 'this.currentPage');
+            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)'
+                        } else {
+                            d.children[i].style.backgroundColor = 'rgba(54, 106, 255, 0.3)'
+                        }
+                    }
+                })
+            }
+        },
+        displayHiglight (pageIndex) {
+            let lineHeightDom = Array.from(document.getElementsByClassName('rectdom'))
+            if (lineHeightDom) {
+                lineHeightDom.forEach((d) => {
+                    if (d.getAttribute('page-index') == pageIndex) {
+                        d.style.display = 'none'
+                    }
+                })
+            }
+        },
+        // 前端暂时缓存多页
+        autoLoadMore (pageIndex) {
+            let pdfResloute = this.cachePdf.find(cache => {
+                return cache.page == pageIndex
+            })
+            if (pdfResloute) {
+                this.getpdfResloutePage(pdfResloute)
+            } else {
+                this.loadPdfData(pageIndex)
+            }
+        },
+        setPageAllLine (arr) {
+            this.currentPageAllLine = []
+            arr.forEach((item, index) => {
+                let i = this.currentPageAllLine.findIndex(l => { return l.page && l.page == item.page })
+                if (i != -1) {
+                    // this.currentPageAllLine[i].allLines.lines.push(item.extractInfo.lines)
+                    this.currentPageAllLine[i].allLines.push({
+                        pageCount: index,
+                        lines: item.extractInfo.lines
+                    })
+                } else {
+                    this.currentPageAllLine.push({
+                        page: item.page,
+                        allLines: [{
+                            pageCount: index,
+                            lines: item.extractInfo.lines
+                        }],
+                    })
+                }
+            })
+        },
+        openTouch() {
+            // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行
+            let that = this;
+            this.$nextTick(() => {
+                // setInterval(() => {
+                //     this.scale = this.scale + 0.1
+                //     that.pages.forEach((item, index) =>{
+                //             if(item.dom) {
+                //                 item.dom.children.forEach( childDom =>{
+                //                     if(childDom.getAttribute('react-count')) {
+                //                         childDom.style.transform = "scale(" +  this.scale + ")";
+                //                         childDom.style.transformOrigin = "0px 0px 0px";
+                //                     } else {
+                //                         item.dom = null
+                //                         this.startRenderPages(item.pdfPage, null, index)
+                //                     }
+                //                 } )
+                //             }
+                //         })
+                // }, 100);
+                // 获取放大或缩小的区域DOM
+                let matrix_box = this.contentView
+                matrix_box.addEventListener("touchstart", function (event) {
+                    this.isTouchMoved = true
+                    let touches = event.touches;
+                    let events = touches[0];
+                    let events2 = touches[1];
+
+                    // event.preventDefault();
+
+                    // 第一个触摸点的坐标
+                    that.displacement.pageX = events.pageX;
+                    that.displacement.pageY = events.pageY;
+
+                    that.displacement.moveable = true;
+
+                    if (events2) {
+                        that.displacement.pageX2 = events2.pageX;
+                        that.displacement.pageY2 = events2.pageY;
+                    }
+
+                    that.displacement.originScale = this.scale || 1;
+                    // console.log(that.displacement);
+                });
+                document.addEventListener("touchmove", function (event) {
+                    if (!that.displacement.moveable) {
+                        return;
+                    }
+                    // event.preventDefault();
+                    let touches = event.touches;
+                    let events = touches[0];
+                    let events2 = touches[1];
+                    // 双指移动
+                    if (events2) {
+                        // 第2个指头坐标在touchmove时候获取
+                        if (!that.displacement.pageX2) {
+                            that.displacement.pageX2 = events2.pageX;
+                        }
+                        if (!that.displacement.pageY2) {
+                            that.displacement.pageY2 = events2.pageY;
+                        }
+                        // 双指缩放比例计算
+                        let zoom = that.getDistance({
+                                x: events.pageX,
+                                y: events.pageY
+                            },
+                                {
+                                    x: events2.pageX,
+                                    y: events2.pageY
+                                }
+                            ) / that.getDistance(
+                                {
+                                    x: that.displacement.pageX,
+                                    y: that.displacement.pageY
+                                },
+                                {
+                                    x: that.displacement.pageX2,
+                                    y: that.displacement.pageY2
+                                }
+                            );
+                        // 应用在元素上的缩放比例
+                        let newScale = that.displacement.originScale * zoom;
+                        console.log(zoom, newScale , this.scale, 'newScale');
+                        // 最大缩放比例限制
+                        if (newScale > 2) {
+                            newScale = 2;
+                        }
+                        // 最大缩放比例限制
+                        if(newScale < 1) {
+                            newScale = 1;
+                        }
+                        // 记住使用的缩放值
+                        that.displacement.scale = newScale;
+                        // console.log(newScale);
+                        matrix_box.style.transform = "scale(" + newScale + ")";
+                        // 设置旋转元素的基点位置
+                        matrix_box.style.transformOrigin = "0px 0px 0px";
+                    }
+                },{ passive: false });
+                document.addEventListener('touchend',function() {
+                    that.isTouchMoved = false
+                },{ passive: false })
+            });
+        },
+        getDistance(start, stop) {
+            // Math.hypot()计算参数的平方根
+            return Math.hypot(stop.x - start.x, stop.y - start.y);
+        },
+        setupCanvas(canvas, width, height) {
+            const dpr =  1;
+            // const rect = canvas.getBoundingClientRect();
+            canvas.width = width 
+            canvas.height = height 
+            const ctx = canvas.getContext('2d');
+            console.log(canvas.width, canvas.height, dpr, this.scale);
+            ctx?.scale(dpr, dpr );
+            return ctx;
+        },
+    },
+    computed:{
+        perviewUrl() {
+            return '/web/viewer.html?file=' + '/pdflist/pdf4split-1.pdf'
+        }
+    },
+    watch:{
+        tagIds: {
+            handler(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 =>{
+                        res.data = {"data":[{"id":"64591b7d8bb8ab1b91c65f24","knowledgeId":"64591a9c8da27649473f3b4b","mainId":"fb348d095c0b4fd7bbd37826563dac7d","page":3,"total":18,"pageHeight":540.0,"pageWidth":960.00946,"publicPageFileUrl":"https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/fb348d095c0b4fd7bbd37826563dac7d/2023/05/08/11/55/18/64591b638bb8ab1b91c65eed/3.pdf","extractInfo":{"location":[280.488,161.32,398.71573,61.99298],"content":"黄花城水长城旅游区位于北京市怀柔区九渡河镇境内，距北京市区65公里，是以奇而著称，融山川、碧水、古长城为一体的旅游休闲胜地。而这里的“三绝景”更是引人入","lines":[{"content":"黄花城水长城旅游区位于北京市怀柔区九渡河镇境内，距","location":[280.488,161.32,398.71573,15.9869995]},{"content":"北京市区65公里，是以奇而著称，融山川、碧水、古长","location":[283.691,184.30899,392.3055,15.9869995]},{"content":"城为一体的旅游休闲胜地。而这里的“三绝景”更是引人入","location":[282.699,207.32599,394.3033,15.9869995]}],"tagId":null}}],"code":"0","msg":null,"traceId":null}
+                        if (res.data.code == 0) {
+                            // tagIds 会按照gpt识别的生成有序的数组，前端直接按照下标的顺序取就可以了
+                            // 缓存拿到的所有数据
+                            this.cachePdf = res.data.data
+                            let publicPageFileUrl = res.data.data[0].publicPageFileUrl
+                            this.currentPage = 0
+                            // console.log(publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')));
+                            if (publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')) === '.pdf') {
+                                this.preViewType = 'pdf'
+                                this.setPageAllLine(this.cachePdf)
+                                this.getpdfResloutePage(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
+        }
+    },
+    mounted () {
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.pdf_view {
+    width: 100%;
+    height: calc(100% - 51px);
+    overflow: auto;
+    background-color: #f5f7fb;
+    padding-bottom: 60px;
+    box-sizing: border-box;
+    // position: relative;
+    // > div {
+    //     width: 100%;
+    //     height: 100%;
+    //     overflow: hidden;
+    //     overflow-y: auto;
+    //     position: relative;
+    // }
+    > iframe {
+        width: 100%;
+        height: 100%;
+    }
+    a:link {
+        color: none;
+    }
+    a:visited {
+        color: none;
+    }
+    a:hover {
+        color: none;
+    }
+    a:active {
+        color: none;
+    }
+    .btn_footer {
+        width: 100%;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        position: absolute;
+        bottom: 0px;
+        left: 0;
+        z-index: 999;
+        background: #ffffff;
+        .prev, .next {
+            width: 35%;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50px;
+            cursor: pointer;
+        }
+        .prev {
+            background: #F2F5FA;
+            color: #000;
+        }
+        .next {
+            background: #366aff;
+            color: #ffffff;
+        }
+    }
+}
 </style>