askbot-dragon 1.3.55 → 1.3.57

package/src/components/pdfPosition.vue

@@ -1,379 +1,1010 @@
-<template>
-  <div class="pdf_view" ref="pdfView" @scroll="pdfScroll">
-  </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'
-
-const pdfjsLib = window['pdfjs-dist']
-if(pdfjsLib) {
-    pdfjsLib.GlobalWorkerOptions.workerSrc = window['pdfjsWorker'] 
-    // 'pdfjs-dist/build/pdf.worker';
-}
-const { TextLayerBuilder } = window['pdfjsViewer']
-export default {
-    name: 'pdfView',
-    props:['tagId'],
-    data() {
-        return {
-            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:{}
-            },
-            pdfUrl:''
-        }
-    },
-    methods:{
-        async loadPdfData(loadPage) {
-            // 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];
-                    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)
-                        });
-                    }
-                }
-            });
-        },
-        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.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
-            // 创建内容绘制区，并设置大小
-            this.contentView.style.width = `${ pageSize.width }px`;
-            this.contentView.style.height = `${( this.totalPageCount * (pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
-            this.contentView.style.margin = '0 auto 0'
-            this.contentView.style.position = 'relative'
-            // contentView.style.overflowY = 'auto'
-            this.$refs.pdfView.appendChild(this.contentView);
-            this.renderPages(pageIndex)
-        },
-        renderPageContent(page, pageIndex) {
-            const { pdfPage, pageNo, dom } = page;
-            // dom 元素已存在，无须重新渲染，直接返回
-            if (dom && dom.children.length != 0) {
-                // console.log(dom.children, 'length');
-                return;
-            }
-            const viewport = pdfPage.getViewport({
-                scale: this.scale,
-                rotation: this.rotation,
-            });
-            // 创建新的canvas
-            const canvas = document.createElement('canvas');
-            const context = 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);
-            // 渲染内容
-            // console.log(pdfPage.render({
-            //     canvasContext: context,
-            //     viewport,
-            // }));
-            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实例
-                // 这里因为版本问题跟pc端有些差异
-                pageDom.appendChild(textLayerDiv);
-                let textLayer = new TextLayerBuilder({
-                    textLayerDiv:textLayerDiv,
-                    pageIndex: pdfPage._pageIndex,
-                    viewport: viewport,
-                });
-                textLayer.setTextContent(textContent);
-                textLayer.render()
-            })
-            page.dom = pageDom;
-            if(pageIndex == this.identifyTextPostion.page) {
-                let div = document.createElement('div')
-                div.style.position = 'absolute';
-                let lineHeightScaleWidth =  this.pageSize.width / this.identifyTextPostion.pageWidth
-                let lineHeightScaleHeight =  this.pageSize.height / this.identifyTextPostion.pageHeight
-
-                div.style.left = this.identifyTextPostion.left * lineHeightScaleWidth + 'px',
-                div.style.top = this.identifyTextPostion.top * lineHeightScaleHeight + 'px'
-                div.style.height = this.identifyTextPostion.height * lineHeightScaleHeight + 'px' ;
-                div.style.width = this.identifyTextPostion.width * lineHeightScaleWidth + 'px'
-                div.style.backgroundColor = 'rgb(191, 185, 255, 0.5)'
-                pageDom.appendChild(div)
-            }
-            this.contentView.appendChild(pageDom);
-            if(this.fisrtLoad) {
-                setTimeout(() =>{
-                    this.$refs.pdfView.scrollTop = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))}`
-                }, 100)
-                this.fisrtLoad = false
-            }
-            
-        },
-        // 监听容器的滚动事件，触发 scrollPdf 方法
-        // 这里加了防抖保证不会一次产生过多请求
-        scrollPdf: _.debounce(function(e, that) {
-            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;
-            // that.loadBefore(pageIndex);
-            // that.loadAfter(pageIndex);
-            this.loadPdfData(pageIndex)
-        }, 500),
-        pdfScroll(e) {
-            // console.log(e);
-            this.scrollPdf(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 < 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;
-                }
-            }
-            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);
-        }
-    },
-    computed:{
-        perviewUrl() {
-            return '/web/viewer.html?file=' + '/pdflist/pdf4split-1.pdf'
-        }
-    },
-    watch:{
-        tagId: {
-            handler(value) {
-                if(value) {
-                    // 在 pdf_view 下创建 所有canvs的容器
-                    this.contentView = document.createElement('div')
-                    this.$http.get('/knowledge-api/knowledge/knowledge-part-location-info/' + value).then(res =>{
-                        if(res.data.code == 0) {
-                            let pdfResloute = res.data.data
-                            // 根据当前页面宽度设置缩放比例
-                            this.scale = this.$refs.pdfView.clientWidth / pdfResloute.pageWidth
-                            // this.scale = 1
-                            // 从后端获取到当前分片后所有的pdf页码，初始化数组，数组下{} 对应每页pdf文件
-                            this.pdfUrl = pdfResloute.publicPageFileUrl.substring(0, pdfResloute.publicPageFileUrl.lastIndexOf('/') + 1)
-                            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
-                            this.initPages(pdfResloute.total)
-                            // 定位功能，加载对应页码位置
-                            this.loadPdfData(pdfResloute.page)
-                        } else {
-                            let div = document.createElement('div')
-                            div.innerText = '文件加载异常'
-                            this.contentView.appendChild(div)
-                            this.$refs.pdfView.appendChild(this.contentView)
-                        }
-                    })
-                }
-                console.log(value);
-            },
-            deep:true,
-            immediate:true
-        }
-    },
-
-    mounted() {
-        // 在 pdf_view 下创建 所有canvs的容器
-        // this.contentView = document.createElement('div')
-        // // 从后端获取到当前分片后所有的pdf页码，初始化数组，数组下{} 对应每页pdf文件
-        // this.initPages(8);
-        // // 定位功能，加载对应页码位置
-        // this.loadPdfData(1)
-    }
-}
-</script>
-
-<style lang="less" scoped>
-.pdf_view {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: #f5f7fb;
-    // > div {
-    //     width: 100%;
-    //     height: 100%;
-    //     overflow: hidden;
-    //     overflow-y: auto;
-    //     position: relative;
-    // }
-    > iframe {
-        width: 100%;
-        height: 100%;
-    }
-}
+<template>
+  <div class="pdf_view" ref="pdfView" @scroll="pdfScroll">
+        <div class="btn_footer">
+            <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']
+export default {
+    name: 'pdfView',
+    props:['tagIds'],
+    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'
+        }
+    },
+    // methods:{
+    //     getpdfResloutePage (pdfResloute) {
+    //         // 根据当前页面宽度设置缩放比例
+    //         this.scale = this.$refs.pdfView.clientWidth / pdfResloute.pageWidth
+    //         // this.scale = 1
+    //         // 从后端获取到当前分片后所有的pdf页码，初始化数组，数组下{} 对应每页pdf文件
+    //         this.pdfUrl = pdfResloute.publicPageFileUrl.substring(0, pdfResloute.publicPageFileUrl.lastIndexOf('/') + 1)
+    //         this.initPages(pdfResloute.total)
+    //         // 定位功能，加载对应页码位置
+    //         this.loadPdfData(pdfResloute.page)
+    //     },
+    //     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
+    //                     }],
+    //                 })
+    //             }
+    //         })
+    //     },
+    //     async loadPdfData(loadPage) {
+    //         // pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js");
+    //         // 拿到第一个分片
+    //         const { startPage, url } = await this.fetchPdfFragment(loadPage);
+    //         console.log(url);
+    //         let loadingTask = pdfjsLib.getDocument(url)
+    //         console.log(loadingTask);
+    //         loadingTask.then((pdfDoc) => {
+    //             // 将已经下载的分片保存到 pages 数组中
+    //             for (let i = 0; i < pdfDoc.numPages; i += 1) {
+    //                 const pageIndex = startPage + i;
+    //                 const page = this.pages[pageIndex - 1];
+    //                 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)
+    //                     });
+    //                 }
+    //             }
+    //         });
+    //     },
+    //     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 => {
+    //                 console.log(res,'resres');
+    //                 if (res.bodyText) {
+    //                     // 最后返回一个 包含这4个参数的对象
+    //                     obj = await {
+    //                         "startPage": pageIndex, // 分片的开始页码
+    //                         "endPage": pageIndex + 5, // 分片结束页码
+    //                         "totalPage": this.totalPageCount, // pdf 总页数
+    //                         "url": res.bodyText // 分片内容下载地址
+    //                     }
+    //                 }
+    //             })
+    //         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
+    //         // 创建内容绘制区，并设置大小
+    //         this.contentView.style.width = `${ pageSize.width }px`;
+    //         this.contentView.style.height = `${( this.totalPageCount * (pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
+    //         this.contentView.style.margin = '0 auto 0'
+    //         this.contentView.style.position = 'relative'
+    //         // contentView.style.overflowY = 'auto'
+    //         this.$refs.pdfView.appendChild(this.contentView);
+    //         this.renderPages(pageIndex)
+    //     },
+    //     renderPageContent(page, pageIndex) {
+    //         const { pdfPage, pageNo, dom } = page;
+    //         // dom 元素已存在，无须重新渲染，直接返回
+    //         if (dom && dom.children.length != 0) {
+    //             // console.log(dom.children, 'length');
+    //             return;
+    //         }
+    //         const viewport = pdfPage.getViewport({
+    //             scale: this.scale,
+    //             rotation: this.rotation,
+    //         });
+    //         // 创建新的canvas
+    //         const canvas = document.createElement('canvas');
+    //         const context = 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);
+    //         // 渲染内容
+    //         // console.log(pdfPage.render({
+    //         //     canvasContext: context,
+    //         //     viewport,
+    //         // }));
+    //         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实例
+    //             // 这里因为版本问题跟pc端有些差异
+    //             pageDom.appendChild(textLayerDiv);
+    //             let textLayer = new TextLayerBuilder({
+    //                 textLayerDiv:textLayerDiv,
+    //                 pageIndex: pdfPage._pageIndex,
+    //                 viewport: viewport,
+    //             });
+    //             textLayer.setTextContent(textContent);
+    //             textLayer.render()
+    //         })
+    //         page.dom = pageDom;
+    //         if(pageIndex == this.identifyTextPostion.page) {
+    //             let div = document.createElement('div')
+    //             div.style.position = 'absolute';
+    //             let lineHeightScaleWidth =  this.pageSize.width / this.identifyTextPostion.pageWidth
+    //             let lineHeightScaleHeight =  this.pageSize.height / this.identifyTextPostion.pageHeight
+
+    //             div.style.left = this.identifyTextPostion.left * lineHeightScaleWidth + 'px',
+    //             div.style.top = this.identifyTextPostion.top * lineHeightScaleHeight + 'px'
+    //             div.style.height = this.identifyTextPostion.height * lineHeightScaleHeight + 'px' ;
+    //             div.style.width = this.identifyTextPostion.width * lineHeightScaleWidth + 'px'
+    //             div.style.backgroundColor = 'rgb(191, 185, 255, 0.5)'
+    //             pageDom.appendChild(div)
+    //         }
+    //         this.contentView.appendChild(pageDom);
+    //         if(this.fisrtLoad) {
+    //             setTimeout(() =>{
+    //                 this.$refs.pdfView.scrollTop = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL))}`
+    //             }, 100)
+    //             this.fisrtLoad = false
+    //         }
+            
+    //     },
+    //     // 监听容器的滚动事件，触发 scrollPdf 方法
+    //     // 这里加了防抖保证不会一次产生过多请求
+    //     scrollPdf: _.debounce(function(e, that) {
+    //         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;
+    //         // that.loadBefore(pageIndex);
+    //         // that.loadAfter(pageIndex);
+    //         this.loadPdfData(pageIndex)
+    //     }, 500),
+    //     pdfScroll(e) {
+    //         // console.log(e);
+    //         this.scrollPdf(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 < 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;
+    //             }
+    //         }
+    //         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);
+    //     }
+    // },
+    methods: {
+        getpdfResloutePage (pdfResloute) {
+            // 根据当前页面宽度设置缩放比例
+            this.scale = this.$refs.pdfView.clientWidth / pdfResloute.pageWidth
+            // 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
+            // 创建内容绘制区，并设置大小
+            this.contentView.style.width = `${pageSize.width}px`;
+            this.contentView.style.height = `${(this.totalPageCount * (pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
+            this.contentView.style.margin = '0 auto 0'
+            this.contentView.style.position = 'relative'
+            // 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.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)
+                            }
+                        }
+                    }
+                    // }, 0)
+                }
+                textLayer.setTextContent(textContent);
+                textLayer.render()
+                // pageDom.appendChild(textLayer.div);
+                page.dom = pageDom;
+                this.contentView.appendChild(pageDom);
+                if (this.changetoolbar) {
+                    setTimeout(() => {
+                        console.log('========');
+                        this.renderHighlights()
+                        this.changetoolbar = false
+                    }, 100)
+                }
+                if (this.fisrtLoad) {
+                    setTimeout(() => {
+                        if (this.$refs.pdfView.clientHeight - (this.pageSize.height + this.PAGE_INTVERVAL) > (this.pageSize.height + this.PAGE_INTVERVAL)) {
+                            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)
+                            }
+                        }
+                        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))}`
+                        }
+                    }, 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;
+            // 当前页码在gpt识别列表内
+            // let pdfResloute = this.cachePdf[this.currentPage]
+            // debugger
+            // let pdfResloute = this.cachePdf.find(cache => {
+            //     return cache.page == pageIndex
+            // })
+            // if (pdfResloute) {
+            //     this.identifyTextPostion.extractInfo = pdfResloute.extractInfo
+            //     this.identifyTextPostion.currentPageAllLine = []
+            //     this.cachePdf.forEach(item => {
+            //         if (item.page == pdfResloute.page) {
+            //             this.identifyTextPostion.currentPageAllLine.push({
+            //                 lines: [...item.extractInfo.lines],
+            //                 page: item.page
+            //             })
+            //         }
+            //     })
+            //     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
+            // }
+            that.loadPdfData(pageIndex - 1)
+            that.loadPdfData(pageIndex)
+            that.loadPdfData(pageIndex + 1)
+            // if (height - (that.pageSize.height + that.PAGE_INTVERVAL) > (that.pageSize.height + that.PAGE_INTVERVAL)) {
+            //     let loadNum = Math.ceil(height / (that.pageSize.height + that.PAGE_INTVERVAL))
+            //     if (loadNum > 2 && pageIndex > 1) {
+            //         that.loadPdfData(pageIndex - 1)
+            //         that.loadPdfData(pageIndex)
+            //         that.loadPdfData(pageIndex + 1)
+            //     } else {
+            //         for (let n = 0; n < loadNum; n++) {
+            //             that.loadPdfData(pageIndex + n)
+            //         }
+            //     }
+            // } else {
+            //     that.loadPdfData(pageIndex)
+            // }
+        }, 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;
+            // // 当前页码在gpt识别列表内
+            // let pdfResloute = this.cachePdf[this.currentPage]
+            // if (pdfResloute) {
+            //     this.identifyTextPostion.extractInfo = pdfResloute.extractInfo
+            //     this.identifyTextPostion.currentPageAllLine = []
+            //     this.cachePdf.forEach(item => {
+            //         if (item.page == pdfResloute.page) {
+            //             this.identifyTextPostion.currentPageAllLine.push({
+            //                 lines: [...item.extractInfo.lines],
+            //                 page: item.page
+            //             })
+            //         }
+            //     })
+            //     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
+            // }
+            this.loadPdfData(pageIndex)
+        },
+        pdfScroll (e) {
+            // if (this.changetoolbar) {
+            //     this.directScrolling(e, this)
+            // } else {
+            //     this.debounceScrollPdf(e, this)
+            // }
+            if(this.preViewType !== 'pdf') {
+                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 = 0
+            }
+            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
+            // console.log( Math.floor((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + (this.pageSize.height + this.PAGE_INTVERVAL * 2) ,this.$refs.pdfView.scrollHeight);
+            // debugger
+            // if(this.$refs.pdfView.scrollTop == Math.floor((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) ||
+            //     Math.floor((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + (this.pageSize.height + this.PAGE_INTVERVAL) >= this.$refs.pdfView.scrollHeight) {
+            //     this.renderHighlights()
+            // } else {
+            // 在当前段落在最后一页pdf时，根据计算的高度并不能触发滚动，在此执行重新渲染方法，非次情况会执行两次，待优化
+            this.$nextTick(() => {
+                this.renderHighlights()
+            })
+            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) {
+                    this.allTr[index].children.forEach(item =>{
+                        item.style.background = 'rgba(255, 136, 0, 0.6)'
+                    })
+                    this.$refs.pdfView.scrollTop = this.allTr[index].offsetTop
+                } else {
+                    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
+                        }],
+                    })
+                }
+            })
+        }
+    },
+    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.$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
+                            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, true);
+                                        // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
+                                        xhr.onload = ({ currentTarget }) => {
+                                            // 请求完成
+                                            if (currentTarget.status === 200) {   // 返回200
+                                                this.contentView.innerHTML = currentTarget.response
+                                                this.contentView.style.padding = '10px'
+                                                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)
+                        }
+                    })
+                }
+                console.log(value);
+            },
+            deep:true,
+            immediate:true
+        }
+    },
+
+    mounted() {
+        // 在 pdf_view 下创建 所有canvs的容器
+        // this.contentView = document.createElement('div')
+        // // 从后端获取到当前分片后所有的pdf页码，初始化数组，数组下{} 对应每页pdf文件
+        // this.initPages(8);
+        // // 定位功能，加载对应页码位置
+        // this.loadPdfData(1)
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.pdf_view {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: #f5f7fb;
+    padding-bottom: 50px;
+    position: relative;
+    // > div {
+    //     width: 100%;
+    //     height: 100%;
+    //     overflow: hidden;
+    //     overflow-y: auto;
+    //     position: relative;
+    // }
+    > iframe {
+        width: 100%;
+        height: 100%;
+    }
+    .btn_footer {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        position: absolute;
+        bottom: 50px;
+        left: 0;
+        .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>