askbot-dragon 1.5.66-beta → 1.5.67-beta

package/src/components/pdfPosition.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="pdf_view" ref="pdfView" @scroll="pdfScroll" :style="{
+    <div id="pdf_view" class="pdf_view" :style="{
         marginTop: isPC ? '50px' : '',
         marginBottom: tagIds.length > 1 ? '60px' : '0px',
         height: setHeight
@@ -17,6 +17,7 @@
                 </el-option>
             </el-select>
         </div>
+        <div class="pdf_container_view" id="pdf_container_view" @scroll="pdfScroll"  ref="pdfView"></div>
         <div class="btn_footer" v-if="tagIds.length > 1 && !isPC">
             <div class="prev" @click="prev">上一段</div>
             <div class="next" @click="next">下一段</div>
@@ -44,10 +45,11 @@ if (pdfjsLib) {
     // 'pdfjs-dist/build/pdf.worker';
 }
 const { TextLayerBuilder } = window['pdfjs-dist/web/pdf_viewer']
+const CSS_UNITS = 96.0 / 72.0
 // import { zoomElement } from '../assets/js/hammer'
 export default {
     name: 'pdfView',
-    props: ['tagIds', 'isMessageRecord'],
+    props: ['tagIds', 'isMessageRecord','fileName'],
     data () {
         return {
             url: '',
@@ -94,6 +96,7 @@ export default {
             },
             isTouchMoved: false,
             transformSalce: null,
+            defaultTransform:0.8,
             isPC: false,
             handScale: 'auto',
             scaleList: [
@@ -248,12 +251,13 @@ export default {
                 if (this.$refs.pdfView.clientWidth / this.pageSize.width >= 1 || this.isMessageRecord) {
                     this.contentView.style.width = `${pageSize.width - 10}px`;
                     this.contentView.style.height = `${(this.totalPageCount * (pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL}px`;
+                    this.contentView.style.margin = '0 auto 0'
                 } else {
-                    this.transformSalce = this.$refs.pdfView.clientWidth / this.pageSize.width
+                    this.transformSalce = this.$refs.pdfView.clientWidth / this.pageSize.width / CSS_UNITS
                     this.contentView.style.width = `${pageSize.width * this.transformSalce - 10}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'
+                // this.contentView.style.margin = '0 auto 0'
                 this.contentView.style.position = 'relative'
                 this.contentView.style.paddingBottom = '60px'
                 // contentView.style.overflowY = 'auto'
@@ -281,36 +285,41 @@ export default {
             const { pdfPage, pageNo, dom } = page;
             // dom 元素已存在，无须重新渲染，直接返回
             if ((dom && dom.children.length != 0) || page.loading) {
-                return;
+              return;
             }
             page.loading = true
             const viewport = pdfPage.getViewport({
-                scale: this.scale,
-                rotation: this.rotation,
+              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;
+            canvas.height = this.pageSize.height * (this.fileName ? CSS_UNITS : 1);
+            canvas.width = this.pageSize.width * (this.fileName ? CSS_UNITS : 1);
             canvas.style.position = 'relative'
             canvas.style.top = -3 + 'px'
             // 创建渲染的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.style.top = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL) * (this.fileName ? CSS_UNITS : 1)) + this.PAGE_INTVERVAL}px`;
+            pageDom.style.width = `${this.pageSize.width * (this.fileName ? CSS_UNITS : 1)}px`;
+            pageDom.style.height = `${this.pageSize.height * (this.fileName ? CSS_UNITS : 1)}px`;
             pageDom.setAttribute('data-id', 'page' + pageNo)
-            pageDom.appendChild(canvas);
+            // pageDom.appendChild(canvas);
             // 渲染内容
             let renderContext = {
                 canvasContext: context,
                 viewport: viewport,
+                transform: this.fileName ? [CSS_UNITS, 0, 0, CSS_UNITS, 0, 0] : '',
             }
             await pdfPage.render(renderContext).promise.then(() => {
-                return pdfPage.getTextContent()
+              const html = canvas.toDataURL();
+              let image = document.createElement('img');
+              image.setAttribute('src',html)
+              pageDom.appendChild(image);
+              return pdfPage.getTextContent()
             }).then(async (textContent) => {
                 const textLayerDiv = document.createElement('div');
                 textLayerDiv.setAttribute('class', 'textLayer');
@@ -340,36 +349,35 @@ export default {
                                     let postionArr = lines[index].location
                                     let div = document.createElement('div')
                                     div.style.position = 'absolute';
-                                    div.style.left = postionArr[0] * this.scale + 'px',
+                                    div.style.left = postionArr[0] * this.scale * (this.fileName ? CSS_UNITS : 1) + 'px',
                                     // 后端返回的坐标有基线对齐的问题，top 值是后端算好（基线top - 文字高度），在此加上文字高度的 1/9 （大致比例）为实际展示出文字的top值
-                                    div.style.top = postionArr[1] * this.scale + 'px'
-                                    div.style.height = postionArr[3] * this.scale + 'px';
-                                    div.style.width = postionArr[2] * this.scale + 'px'
+                                    div.style.top = postionArr[1] * this.scale * (this.fileName ? CSS_UNITS : 1) + 'px'
+                                    div.style.height = postionArr[3] * this.scale * (this.fileName ? CSS_UNITS : 1) + 'px';
+                                    div.style.width = postionArr[2] * this.scale * (this.fileName ? CSS_UNITS : 1) + 'px'
                                     div.style.backgroundColor = 'rgba(54, 106, 255, 0.3)'
                                     div.classList.add('lineHeight')
                                     rectdom.appendChild(div)
                                     if (index == 0 && j == 0) {
                                         if (this.transformSalce !== null) {
-                                            rectdomTop = postionArr[1] * this.scale * this.transformSalce
-                                        } else {
-                                            rectdomTop = postionArr[1] * this.scale
-                                        }
-                                        // if(this.isPC) {
-                                        //     rectdomTop = rectdomTop - 50 < 0 ? 0 : rectdomTop - 50
-                                        // }
-                                    }
-                                }
-                            }
-                            if (rectdom.children.length > 0) {
-                                pageDom.appendChild(rectdom)
-                            }
+                                            rectdomTop = postionArr[1]* this.scale * (this.fileName ? CSS_UNITS : 1) * this.transformSalce
+                          } else {
+                            rectdomTop = postionArr[1] * this.scale * (this.fileName ? CSS_UNITS : 1) * this.defaultTransform
+                          }
+                          // if(this.isPC) {
+                          //     rectdomTop = rectdomTop - 50 < 0 ? 0 : rectdomTop - 50
+                          // }
                         }
+                      }
                     }
+                    if (rectdom.children.length > 0) {
+                      pageDom.appendChild(rectdom)
+                    }
+                  }
                 }
-                textLayer.setTextContent(textContent);
-                textLayer.render()
-                pageDom.appendChild(textLayerDiv);
-
+              }
+              textLayer.setTextContent(textContent);
+              textLayer.render()
+              pageDom.appendChild(textLayerDiv);
                 let backgroundDom = document.getElementById('backgroundLoad' + pageNo)
                 if (backgroundDom) {
                     this.contentView.removeChild(backgroundDom);
@@ -377,8 +385,22 @@ export default {
                 page.dom = await pageDom;
                 page.loading = false
                 this.contentView.appendChild(pageDom);
-                if (this.transformSalce !== null) {
-                    this.contentView.style.transform = `scale(${this.transformSalce}, ${this.transformSalce})`
+                let pdf_view = document.getElementsByClassName('pdf_view');
+                if (pdf_view && pdf_view[0]){
+                  pdf_view[0].style.backgroundImage = 'none'
+                }
+                let postionArr = []
+              if (findPage){
+                let AllLines = findPage.allLines
+                if (AllLines.length){
+                  postionArr = AllLines[0].lines[0].location
+                }
+              }
+              if(this.transformSalce !== null && this.fileName) {
+                this.contentView.style.transform = `scale(${this.transformSalce}, ${this.transformSalce})`
+              } else {
+                this.contentView.style.transform = `scale(${this.defaultTransform})`;
+
                 }
                 if (this.changetoolbar) {
                     setTimeout(() => {
@@ -390,22 +412,21 @@ export default {
                     setTimeout(() => {
                         let pageoffsetHeight = 0
                         if (this.transformSalce !== null) {
-                            pageoffsetHeight = (this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce
+                            pageoffsetHeight = (this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce * (this.fileName ? CSS_UNITS : 1)
                         } else {
-                            pageoffsetHeight = (this.pageSize.height + this.PAGE_INTVERVAL)
+                            pageoffsetHeight = (this.pageSize.height + this.PAGE_INTVERVAL) * this.defaultTransform *(this.fileName ? CSS_UNITS : 1)
                         }
                         if (this.$refs.pdfView.clientHeight - pageoffsetHeight > 0 && pageIndex == 1) {
                             const height = this.$refs.pdfView.clientHeight;
                             let startNum = 0
                             let endNum = 0
                             if (this.transformSalce !== null) {
-                                startNum = Math.ceil(this.$refs.pdfView.scrollTop / ((this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce))
-                                endNum = startNum + Math.ceil(height / ((this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce))
-                            } else {
-                                startNum = Math.ceil(this.$refs.pdfView.scrollTop / (this.pageSize.height + this.PAGE_INTVERVAL))
-                                endNum = startNum + Math.ceil(height / (this.pageSize.height + this.PAGE_INTVERVAL))
-
-                            }
+                                startNum = Math.ceil(this.$refs.pdfView.scrollTop / ((this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce* (this.fileName ? CSS_UNITS : 1)))
+                                endNum = startNum + Math.ceil(height / ((this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce* (this.fileName ? CSS_UNITS : 1)))
+                    } else {
+                      startNum = Math.ceil(this.$refs.pdfView.scrollTop / ((this.pageSize.height + this.PAGE_INTVERVAL) * (this.fileName ? CSS_UNITS : 1) * this.defaultTransform))
+                                endNum = startNum + Math.ceil(height / ((this.pageSize.height + this.PAGE_INTVERVAL) * (this.fileName ? CSS_UNITS : 1) * this.defaultTransform))}
+                    console.log(this.$refs.pdfView.scrollTop, startNum, endNum, 'endNumendNum');
                             for (let pageIndex = startNum; pageIndex <= endNum; pageIndex++) {
                                 if (pageIndex > 0 && pageIndex <= this.pages.length) {
                                     this.loadPdfData(pageIndex)
@@ -437,14 +458,14 @@ export default {
             let startNum = 0
             let endNum = 0
             if (this.transformSalce !== null) {
-                startNum = Math.ceil(scrollTop / ((that.pageSize.height + that.PAGE_INTVERVAL) * this.transformSalce))
-                endNum = startNum + Math.ceil(height / ((that.pageSize.height + that.PAGE_INTVERVAL) * this.transformSalce))
+                startNum = Math.ceil(scrollTop / ((that.pageSize.height + that.PAGE_INTVERVAL) * this.transformSalce * (this.fileName ? CSS_UNITS : 1)))
+                endNum = startNum + Math.ceil(height / ((that.pageSize.height + that.PAGE_INTVERVAL) * this.transformSalce * (this.fileName ? CSS_UNITS : 1)))
             } else {
-                startNum = Math.ceil(scrollTop / (that.pageSize.height + that.PAGE_INTVERVAL))
-                endNum = startNum + Math.ceil(height / (that.pageSize.height + that.PAGE_INTVERVAL))
+                startNum = Math.ceil(scrollTop / ((that.pageSize.height + that.PAGE_INTVERVAL) * (this.fileName ? CSS_UNITS : 1) * this.defaultTransform))
+                endNum = startNum + Math.ceil(height / ((that.pageSize.height + that.PAGE_INTVERVAL) * (this.fileName ? CSS_UNITS : 1) * this.defaultTransform))
             }
-            for (let pageIndex = startNum; pageIndex < endNum; pageIndex++) {
-                if (pageIndex > 0 && pageIndex < that.pages.length) {
+            for (let pageIndex = startNum; pageIndex <= endNum; pageIndex++) {
+                if (pageIndex > 0 && pageIndex <= that.pages.length) {
                     that.loadPdfData(pageIndex)
                 }
             }
@@ -529,10 +550,10 @@ export default {
                 return
             }
             const pageDom = document.createElement('div');
-            pageDom.style.width = `${this.pageSize.width}px`;
-            pageDom.style.height = `${this.pageSize.height}px`;
+            pageDom.style.width = `${this.pageSize.width * (this.fileName ? CSS_UNITS : 1)}px`;
+            pageDom.style.height = `${this.pageSize.height * (this.fileName ? CSS_UNITS : 1)}px`;
             pageDom.style.position = 'absolute';
-            pageDom.style.top = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + this.PAGE_INTVERVAL
+            pageDom.style.top = `${((pageNo - 1) * (this.pageSize.height + this.PAGE_INTVERVAL) * (this.fileName ? CSS_UNITS : 1)) + 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'
@@ -607,9 +628,9 @@ export default {
                 this.renderHighlights()
             })
             if (this.transformSalce !== null) {
-                this.$refs.pdfView.scrollTop = `${((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce) + (this.identifyTextPostion.top * this.scale * this.transformSalce)}`
+                this.$refs.pdfView.scrollTop = `${((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL) * this.transformSalce * (this.fileName ? CSS_UNITS : 1)) + (this.identifyTextPostion.top * this.scale * this.transformSalce * (this.fileName ? CSS_UNITS : 1))}`
             } else {
-                this.$refs.pdfView.scrollTop = `${((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL)) + (this.identifyTextPostion.top * this.scale * this.transformSalce)}`
+                this.$refs.pdfView.scrollTop = `${((pdfResloute.page - 1) * (this.pageSize.height + this.PAGE_INTVERVAL) * this.defaultTransform * (this.fileName ? CSS_UNITS : 1)) + (this.identifyTextPostion.top * this.scale * this.defaultTransform * (this.fileName ? CSS_UNITS : 1))}`
             }
         },
         scrollToExcalTop (currentPage) {
@@ -863,6 +884,7 @@ export default {
                 if (value && value.length) {
                     // 在 pdf_view 下创建 所有canvs的容器
                     this.contentView = document.createElement('div')
+                    this.contentView.setAttribute('id','contentView')
                     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}
@@ -1053,11 +1075,16 @@ export default {
                                         xhr.onload = ({ currentTarget }) => {
                                             // 请求完成
                                             if (currentTarget.status === 200) {   // 返回200
+                                                let pdf_view = document.getElementsByClassName('pdf_view');
+                                                if (pdf_view && pdf_view[0]){
+                                                  pdf_view[0].style.backgroundImage = 'none'
+                                                }
                                                 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++) {
@@ -1100,10 +1127,14 @@ export default {
     width: 100%;
     height: calc(100% - 110px);
     overflow: auto;
+    //overflow-y: scroll;
     background-color: #f5f7fb;
     // margin-bottom: 60px;
     box-sizing: border-box;
-
+    background-image: url('https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif');
+    background-position: center;
+    background-size: 50px;
+    background-repeat: no-repeat;
     // position: relative;
     // > div {
     //     width: 100%;
@@ -1292,6 +1323,12 @@ export default {
             background: rgba(221, 222, 223, 1);
         }
     }
+  .pdf_container_view{
+    height: 100%;
+    width: 100%;
+    position: relative;
+    overflow: auto;
+  }
 }
 </style>
 <style lang="less">
@@ -1304,7 +1341,6 @@ export default {
     0% {
         background: rgba(255, 136, 0, 0.3);
     }
-
     25% {
         background: rgba(255, 136, 0, 0.6);
     }

package/src/components/previewPdf.vue

@@ -54,7 +54,7 @@
     </div>
     <div id="drawer_content_pre">
       <template v-if="tagIds && tagIds.length != 0 && drawer">
-        <pdfPosition :tagIds="tagIds" :isMessageRecord="isMessageRecord"></pdfPosition>
+        <pdfPosition :tagIds="tagIds" :isMessageRecord="isMessageRecord" :fileName="fileName" ref="pdfPosition"></pdfPosition>
       </template>
       <template v-else>
         <div v-if="fileType == 'VIDEO'" style="width: 100%;">
@@ -97,6 +97,7 @@ export default {
             tagIds: [],
             // '6454aa1a70573a6ead6f0f7d', '6454aa1a70573a6ead6f0f81',
             loading:true,
+          fileName:''
         }
     },
     mounted() {
@@ -117,6 +118,9 @@ export default {
         sourceFileType:{
           type: String,
           default: '',
+        },
+        watermark:{
+          type: Object
         }
     },
     components:{
@@ -126,9 +130,20 @@ export default {
       drawer(value) {
         if(value) {
           this.$nextTick(() =>{
-            zoomElement(document.getElementById('drawer_content_pre'))
+            if (this.tagIds && this.tagIds.length != 0){
+              zoomElement(document.getElementById('pdf_container_view'))
+            }
           })
         }
+        setTimeout(() => {
+          let previewIframe = document.getElementsByClassName('preview_iframe')
+          Array.from(previewIframe).forEach(item =>{
+            item.onload = () =>{
+              console.debug('previewIframe 106',previewIframe,this.drawer)
+              item.style.backgroundImage = 'none'
+            }
+          })
+        })
       }
     },
     computed:{
@@ -143,8 +158,10 @@ export default {
             //     }
             // }
             url = url + this.url
-            if(this.sourceFileType == '.ppt' || this.sourceFileType == '.pptx') {
-                url += '&officePreviewType=pdf'
+            url += '&officePreviewType=pdf'
+            if(this.watermark) {
+              url = this.watermark.textWatermarkValue ? (url += this.watermark.textWatermarkValue) : url
+              url = this.watermark.visitorWatermarkValue ? (url += this.watermark.visitorWatermarkValue) : url
             }
             return url
         },
@@ -282,10 +299,6 @@ export default {
     overflow: auto;
     height: calc(100% - 50px);
     background: #FFF;
-    background-image: url('https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif');
-    background-position: center;
-    background-size: 50px;
-    background-repeat: no-repeat;
   }
 }
 @media screen and (min-width: 768px) {