askbot-dragon 1.3.18 → 1.3.19

package/src/components/myPopup.vue

@@ -1,71 +1,71 @@
-<template>
-  <div class="container">
-    <div class="top-container">
-      <div class="close">取消</div>
-      <div class="sure">确定</div>
-    </div>
-    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :offset="1" @load="onload" class="list-container">
-      <van-cell v-for="item in list" :key="item.id" :title="item.name" />
-      <!-- <van-cell  title="123" />
-      <van-cell  title="asdasd" />
-      <van-cell  title="adszx" />
-      <van-cell  title="zxc zc" />
-      <van-cell  title="asdasd" />
-      <van-cell  title="wqeqweqwe" />
-      <van-cell  title="icvbncvbn" /> -->
-    </van-list>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    finished:{
-      type: Boolean,
-      default: false
-    },
-    list:{
-      type:Array,
-      default:() =>{
-        return []
-      }
-    }
-  },
-  data() {
-    return {
-      show: false,
-      loading: false
-    }
-  },
-  methods: {
-    onload() {
-      this.$emit('onload')
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.container {
-  width: 100%;
-  height: 100%;
-  .top-container {
-    width: 100%;
-    height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 20px;
-    box-sizing: border-box;
-    .sure {
-      color: #366aff;
-    }
-    .close {
-      color: #cccccc;
-    }
-  }
-  .list-container {
-    width: 100%;
-    height: calc(100% - 50px);
-  }
-}
+<template>
+  <div class="container">
+    <div class="top-container">
+      <div class="close">取消</div>
+      <div class="sure">确定</div>
+    </div>
+    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :offset="1" @load="onload" class="list-container">
+      <van-cell v-for="item in list" :key="item.id" :title="item.name" />
+      <!-- <van-cell  title="123" />
+      <van-cell  title="asdasd" />
+      <van-cell  title="adszx" />
+      <van-cell  title="zxc zc" />
+      <van-cell  title="asdasd" />
+      <van-cell  title="wqeqweqwe" />
+      <van-cell  title="icvbncvbn" /> -->
+    </van-list>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    finished:{
+      type: Boolean,
+      default: false
+    },
+    list:{
+      type:Array,
+      default:() =>{
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      show: false,
+      loading: false
+    }
+  },
+  methods: {
+    onload() {
+      this.$emit('onload')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  .top-container {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .sure {
+      color: #366aff;
+    }
+    .close {
+      color: #cccccc;
+    }
+  }
+  .list-container {
+    width: 100%;
+    height: calc(100% - 50px);
+  }
+}
 </style>

package/src/components/pdfPosition.vue

@@ -0,0 +1,371 @@
+<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'
+
+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实例
+                let textLayer = new TextLayerBuilder({
+                    textLayerDiv:textLayerDiv,
+                    pageIndex: pdfPage._pageIndex,
+                    viewport: viewport,
+                });
+                textLayer.setTextContentSource(textContent);
+                textLayer.render(viewport)
+                pageDom.appendChild(textLayer.div);
+            })
+            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%;
+    }
+}
+</style>