askbot-dragon 1.6.61-beta → 1.6.63-beta

package/src/components/previewPdf.vue

@@ -1,654 +1,672 @@
-
-<!-- preview-pdf
-  组件主要负责 知识项目中 文件的预览，携带定位信息参数 tagIds tagId 的会解析文件增加定位功能
-  不携带定位信息的 也是走 kkview项目预览
-  另外增加了在知识项目中预览当前文件的一些功能
--->
-<template>
-    <!-- <van-popup v-model="previewShowPopup" position="bottom" :style="{ height: '90%', background:'#FFFFFF'}" v-if="previewShowPopup">
-      <div class="footer">
-        <span>查看详情</span>
-            <section @click="close">
-            <i class="iconfont guoran-shanchu"></i>
-            </section>
-        </div>
-        <template v-if="tagIds && tagIds.length != 0 && previewShowPopup">
-            <pdfPosition :tagIds="tagIds" ></pdfPosition>
-        </template>
-        <template v-else>
-          <div v-if="fileType == 'VIDEO'" style="width: 100%;height: calc(100% - 60px)">
-              <video :src="url" controls width="100%;" height="98%"></video>
-          </div>
-          <div v-else-if="fileType == 'HTML'" style="width: 100%;height: calc(100% - 60px)">
-              <div class="preview_iframe_html" style="text-algin:left" v-html="fileText"></div>
-          </div>
-          <template v-else-if="url.includes('https://www') || url.includes('http://www')">
-              <iframe class="preview_iframe"
-                      :src="url"
-                      width="100%"
-                      height="100%"
-                      scrolling="100%"
-                      frameborder="no"
-                      border="0"></iframe>
-          </template>
-          <template v-else>
-            <iframe class="preview_iframe" :src="previewUrl" style="border:none;"></iframe>
-          </template>
-        </template>
-        <div class="loading_img" v-show="loading">
-            <img src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif" alt="">
-        </div>
-    </van-popup> -->
-  <el-drawer
-      title="我是标题"
-      :visible.sync="drawer"
-      :with-header="false"
-      :append-to-body="true"
-      :destroy-on-close="true"
-      :modal="false"
-      :direction="previewShowPopup ? 'btt' : 'rtl'"
-      :size="previewShowPopup ? '90%' : '65%'"
-      custom-class="pdf-preview-drawer"
-      v-if="drawer"
-  >
-    <!-- v-else-if="drawer" -->
-    <div class="drawer-footer">
-      <span>{{title ? title : "查看详情"}}</span>
-      <div class="header-right">
-        <div class="onload_btn" v-if="isDownload && isPc" @click="downLoad">
-          下载
-        </div>
-        <div class="summaryBtn"
-             :class="showSummary ? 'summaryActiveBtn' : ''"
-             @click="summaryFun"
-             v-if="isHasChat"
-        >
-          <i class="iconfont guoran-tongyichicun-write-29-jiqiren"></i>
-          <span>智能摘要</span>
-        </div>
-        <template v-if="isHasChat">
-          <div class="chat" @click="previewToDialog(true)" v-if="!previewKnowledgeId">
-            <i class="iconfont guoran-wendapingjia"></i>
-            聊一聊
-          </div>
-          <div class="chat chat_active" @click="previewToDialog(false)" v-else>
-            <i class="iconfont guoran-wendapingjia"></i>
-            聊一聊
-          </div>
-        </template>
-        <section @click="close">
-          <i class="iconfont guoran-shanchu"></i>
-        </section>
-      </div>
-    </div>
-    <div id="drawer_content_pre">
-      <intelligent-summary
-          v-show="showSummary && isHasChat"
-          :knowledgeId="knowledgeId"
-          @closeSummary="closeSummary"
-          @recommendQues="recommendQues"
-          @getSummarySuccess="getSummarySuccess"
-          :style="{marginTop:tagIds && tagIds.length != 0 && isPc ? '50px' : ''}"
-      ></intelligent-summary>
-      <template v-if="tagIds && tagIds.length != 0 && drawer">
-        <pdfPosition :tagIds="tagIds" :isMessageRecord="isMessageRecord" :fileName="fileName" :textWatermarkStr="textWatermarkStr"  ref="pdfPosition"></pdfPosition>
-      </template>
-      <template v-else>
-        <div v-if="fileType == 'VIDEO'" style="width: 100%;">
-          <video :src="url" controls width="100%;" height="98%"></video>
-        </div>
-        <div v-else-if="fileType == 'HTML'" style="width: 100%;">
-          <div class="preview_iframe_html" style="text-algin:left" v-html="fileText"></div>
-        </div>
-        <template v-else-if="url.includes('https://www') || url.includes('http://www')">
-          <iframe class="preview_iframe"
-                  :src="url"
-                  width="100%"
-                  height="100%"
-                  scrolling="100%"
-                  frameborder="no"
-                  border="0"></iframe>
-        </template>
-        <template v-else>
-          <iframe class="preview_iframe_kk" :src="previewUrl" style="border:none;"  :style="{height: iframeHeight}"></iframe>
-        </template>
-      </template>
-      <div class="mobile_onload_btn" v-if="isDownload && !isPc" @click="downLoad">
-        下载
-      </div>
-    </div>
-    <div class="loading_img" v-show="loading">
-            <img src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif" alt="">
-        </div>
-  </el-drawer>
-</template>
-
-<script>
-import pdfPosition from './pdfPosition.vue'
-import { zoomElement } from '../assets/js/hammer'
-import IntelligentSummary from "./intelligentSummary";
-import { isMobile } from "../assets/js/common";
-import { Toast } from 'vant';
-export default {
-    data () {
-        return {
-            previewShowPopup: false,
-            fileText:'',
-            fileType:"",
-            isPc:false,
-            drawer:false,
-            tagIds: [],
-            // '6454aa1a70573a6ead6f0f7d', '6454aa1a70573a6ead6f0f81',
-            loading:true,
-            fileName:'',
-            previewKnowledgeId:"",
-            showSummary:true,
-            iframeHeight:"100%",
-            isDownload:false,
-            textWatermarkStr:""
-        }
-    },
-    mounted() {
-      window.addEventListener('message',this.handleIframeMessage,false);
-      this.isPcFun();
-    },
-    props:{
-        url:{
-            type: String,
-            required: true,
-        },
-        officePreviewType:{
-            type: String,
-            default: ''
-        },
-        isMessageRecord:{
-          type: Boolean,
-          default:false,
-        },
-        sourceFileType:{
-          type: String,
-          default: '',
-        },
-        title: {
-          type: String,
-          default: ''
-        },
-        isHasChat:{
-            type:Boolean,
-          default:false
-        },
-        knowledgeId:{
-          type: String,
-          default: '',
-        },
-        previewOssPath:{
-          type: String,
-          default: '',
-        }
-    },
-    components:{
-      IntelligentSummary,
-      pdfPosition
-    },
-    watch:{
-      drawer(value) {
-        if(value) {
-          this.$emit('open')
-          this.$nextTick(() =>{
-            if (this.tagIds && this.tagIds.length != 0){
-              zoomElement(document.getElementById('pdf_container_view'))
-            }
-          })
-        } else {
-          this.$emit('close')
-        }
-        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'
-            }
-          })
-        })
-      },
-      showSummary:{
-        handler(val){
-          if (!val){
-            this.$nextTick(() => {
-              let preCon = document.querySelector('.pdf_view');
-              if (preCon){
-                preCon.style.height = 'calc(100% - ' + 50 + 'px)'
-              }
-            })
-          } else {
-            this.getSummarySuccess();
-          }
-        }
-      },
-      knowledgeId:{
-        handler(val){
-          if (val){
-            this.getTextWatermark();
-          }
-        }
-      }
-    },
-    computed:{
-        previewUrl() {
-            console.debug('VUE_APP_ENV',process.env.VUE_APP_ENV)
-            let url = process.env.VUE_APP_ENV === 'production' ? 'https://kkfileview.askbot.cn/onlinePreview?url=' : 'https://test.open.askbot.cn/kkfileview/onlinePreview?url='
-            // if(this.url != '') {
-            //     if(/[\u4E00-\u9FA5]+/g.test(this.url)) {
-            //         url += btoa(encodeURIComponent(this.url))
-            //     } else {
-            //         url += btoa(this.url)
-            //     }
-            // }
-            url = url + this.url
-            url += '&officePreviewType=pdf'
-            if(this.watermark) {
-              url = this.watermark.textWatermarkValue ? (url += '&textWatermarkValue=' + this.watermark.textWatermarkValue) : url
-              url = this.watermark.visitorWatermarkValue ? (url += '&visitorWatermarkValue=' + this.watermark.visitorWatermarkValue) : url
-            }
-            console.log('textWatermarkStr 216',this.textWatermarkStr)
-            if (this.textWatermarkStr){
-              url += '&textWatermarkValue=' + this.textWatermarkStr
-            }
-            return url
-        },
-        // fileType() {
-        //     const fileType = this.url.substring(this.url.lastIndexOf('.'));
-        //     if (fileType === '.mp4' || fileType === '.MP4'  || fileType === '.MOV'  || fileType === '.mov') {
-        //         return 'VIDEO'
-        //     } else {
-        //         return 'OTHER'
-        //     }
-
-        // }
-    },
-    methods :{
-        close() {
-          setTimeout(() =>{
-            this.previewShowPopup = false;
-            this.fileType = ''
-          }, 300)
-          this.drawer = false;
-          this.showSummary = false;
-        },
-        loadIframe() {
-
-            if(this.fileType == 'VIDEO' || this.fileType == 'WECHAT' || (this.tagIds && this.tagIds.length != 0)) {
-                this.loading = false
-            } else {
-              let iframe = document.getElementsByClassName('preview_iframe')[0] || document.getElementsByClassName('preview_iframe_kk')[0];
-              if (iframe){
-                iframe.onload = () => {
-                  this.loading = false;
-                  document.getElementById('drawer_content_pre').style.backgroundImage = 'none'
-                }
-              }
-              // let time = setInterval(() =>{
-              //
-              //   if(iframe) {
-              //       this.loading = false
-              //       clearInterval(time)
-              //   }
-              // }, 500)
-            }
-        },
-        getBolb() {
-            this.$http.post('/knowledge-api/knowledge/htmlTextDeal?onlyText=false',{
-                fileInOssPath: this.url,
-                templateId: ''
-            }).then(res =>{
-                if (res.data.code == 0) {
-                    this.fileText = res.data.data
-                    this.loading = false 
-				}
-            })
-        },
-      previewToDialog(flag){
-        this.$emit('previewToDialog',flag)
-      },
-      closeSummary(){
-        this.showSummary = false;
-      },
-      recommendQues(item,knowledgeId){
-        console.log('recommendQues',item,knowledgeId);
-        this.$emit('recommendQues',item,knowledgeId)
-      },
-      handleIframeMessage(res){
-        console.log('handleIframeMessage',res)
-        if (res.data.type == 'getViewerHeight'){
-          let iframeHeight = this.iframeHeight.replace('px','')
-          if (res.data.data && iframeHeight != (res.data.data + 50)){
-            this.iframeHeight = res.data.data + 50 + 'px'
-          }
-        }
-      },
-      summaryFun(){
-          this.showSummary = !this.showSummary;
-          if (this.showSummary){
-            document.getElementById('drawer_content_pre').scrollTop = 0;
-          }
-      },
-      getSummarySuccess(){
-        this.$nextTick(() => {
-          if (this.tagIds.length > 0){
-            let intelligentSummary = document.getElementById('intelligentSummary');
-            let preCon = document.querySelector('.pdf_view')
-            if (intelligentSummary){
-              let height = intelligentSummary.offsetHeight + (this.isPc ? 100 : 50 );
-              if (preCon){
-                preCon.style.height = 'calc(100% - ' + height + 'px)'
-              }
-              console.log('height',height,preCon)
-            }
-          }
-        })
-      },
-      getTextWatermark(){
-        let url = '/knowledge-api/open/knowledge/getPermissionInfo';
-        let obj = {
-          "knowledgeId":this.knowledgeId,
-          "userId":sessionStorage.getItem('_currentUserId'),
-          "mainId":sessionStorage.getItem('_mainId'),
-          "corpId":sessionStorage.getItem('_corpid')
-        }
-        this.$http.post(url,obj).then(res => {
-          console.log('getTextWatermark',res.data.data)
-          if (res.data.data){
-            this.textWatermarkStr = res.data.data.textWatermarkStr;
-            this.isDownload = res.data.data.showDownloadBtn;
-          }
-        })
-      },
-      downLoad () {
-        let url = this.previewOssPath
-        if (decodeURIComponent(url) != url) {
-          url = decodeURIComponent(url)
-        }
-        const fileType = url.substring(url.lastIndexOf('.'));
-        this.$http.post('/knowledge-api/temporary-certificate/or-origin?expired=10', url, {
-          headers:{
-            "Content-Type": "application/json",
-          }
-        }).then(res => {
-          console.log('downLoad 341',res)
-          if (res.data) {
-            if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
-              if(isMobile()) {
-                setTimeout(() =>{
-                  const range = document.createRange();
-                  range.selectNode(document.getElementById('text'));
-                  const selection = window.getSelection();
-                  //移除之前选中内容
-                  if (selection.rangeCount > 0) selection.removeAllRanges();
-                  selection.addRange(range);
-                  document.execCommand('copy');
-                  selection.removeAllRanges()
-                  Toast('下载地址已复制，请前往Safari浏览器访问下载');
-                  this.close()
-                },100)
-              } else {
-                navigator.clipboard.writeText(res.data)
-                this.$message.success({
-                  message:'下载地址已复制，请前往Safari浏览器访问下载',
-                })
-              }
-              return
-            } else {
-              // setTimeout(() =>{
-              //   window.open(res.data,'下载', 'noopener')
-              // }, 2000)
-              // window.open(res.data,'下载', 'noopener')
-              if(isMobile()) {
-                const iframe = document.createElement("iframe");
-                iframe.setAttribute("hidden", "hidden");
-                iframe.onload = () => {
-                  if (iframe) {
-                    console.log("iframe onload....")
-                    iframe.setAttribute('src', 'about:blank');
-                  }
-                };
-                document.body.insertBefore(iframe, null);
-                iframe.setAttribute("src", res.data);
-              } else {
-                let a = document.createElement('a')
-                a.href = res.data
-                a.download = (this.title) + fileType
-                a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
-              }
-              this.close()
-            }
-          }
-        })
-      },
-      isPcFun(){
-        if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
-          this.isPc = false
-        } else {
-          this.isPc = true
-        }
-      }
-    },
-    beforeDestroy() {
-      window.removeEventListener('message', this.handleIframeMessage);
-    }
-}
-</script>
-
-<style lang="less" scoped>
-#drawer_content_pre{
-  padding: 20px;
-  scroll-behavior: smooth;
-  .mobile_onload_btn{
-    position: absolute;
-    right: 0;
-    bottom: 10%;
-    width: 20px;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border-top-left-radius: 10px;
-    border-bottom-left-radius: 10px;
-    color: #366aff;
-    background: #ffffff;
-    border: 1px solid #a1b9ff;
-    font-size: 12px;
-    border-right: none;
-    text-align: center;
-  }
-}
-.onload_btn {
-  width: 80px;
-  height: 26px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  margin-right: 10px;
-  border-radius: 15px;
-  color: #366aff;
-  background: #ffffff;
-  border: 1px solid #a1b9ff;
-}
-.preview_iframe {
-    width: 100%;
-    height: 100%;
-    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;
-}
-.preview_iframe_kk{
-  width: 100%;
-  height: 100%;
-}
-.preview_iframe_html{
-  width: 100%;
-  height: 100%;
-  overflow-y: scroll;
-  text-align: left;
-  box-sizing: border-box;
-  padding: 16px;
-  /deep/.lake-content{
-    margin-left: 10px;
-  }
-  /deep/a:link {
-    color: #0000ee!important;
-  }
-  /deep/a:visited {
-    color: #0000ee!important;
-  }
-  /deep/a:hover {
-    color: #0000ee!important;
-  }
-  /deep/a:active {
-    color: #0000ee!important;
-  }
-  /deep/li:not(.rich-text-li), ol:not(.list-paddingleft-2), ul:not(.list-paddingleft-2){
-    list-style-type: auto!important;
-  }
-  /deep/img{
-    width: 100%;
-  }
-  /deep/.ne-table{
-    width: 100% !important;
-  }
-}
-.footer {
-    width: calc(100% - 40px);
-    height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    padding: 0 20px;
-    border-bottom: 1px solid #cccccc;
-}
-.loading_img {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: #FFF;
-    img {
-        width: 50px;
-        height: 50px;
-    }
-}
-
-.drawer-footer{
-  width:100%;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  padding: 0 20px;
-  border-bottom: 1px solid #cccccc;
-  .header-right{
-    display: flex;
-    align-items: center;
-    .summaryBtn{
-      flex: none;
-      //width: 95px;
-      height: 26px;
-      padding: 0 10px;
-      background: #ffffff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      border: 1px solid #a1b9ff;
-      border-radius: 15px;
-      cursor: pointer;
-      color: #366aff;
-      margin-right: 10px;
-      font-size: 14px;
-      i {
-        font-size: 18px;
-        margin: 0 5px;
-      }
-    }
-    .summaryActiveBtn{
-      background: #366aff !important;
-      color: #ffffff !important;
-    }
-    .chat {
-      width: 95px;
-      height: 26px;
-      background: #ffffff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      border: 1px solid #a1b9ff;
-      border-radius: 15px 0px 15px 15px;
-      cursor: pointer;
-      color: #366aff;
-      margin-right: 10px;
-      font-size: 14px;
-      i {
-        font-size: 16px;
-        margin: 0 5px;
-      }
-    }
-    .chat_active {
-      background: #366aff !important;
-      color: #FFFFFF !important;
-    }
-  }
-}
-@media screen and (max-width: 767px) {
-/* 这里是针对移动设备的css样式设置 */
-  /deep/.el-drawer__body{
-    height: 100%;
-  }
-  #drawer_content_pre {
-    overflow: auto;
-    height: calc(100% - 50px);
-    background: #FFF;
-  }
-}
-@media screen and (min-width: 768px) {
-/* 这里是针对pc设备的css样式设置 */
-  /deep/.el-drawer__body{
-    height: 100%;
-  }
-  #drawer_content_pre {
-    overflow: auto;
-    height: calc(100% - 50px);
-    background: #FFF;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-/* 这里是针对pc设备的css样式设置 */
-  .el-drawer__wrapper {
-    width: 55%;
-    left: calc(100vw - 55%);
-    right: 0;
-    /deep/.pdf-preview-drawer {
-      width: 100% !important;
-    }
-  }
-  /deep/.el-drawer__body{
-    height: 100%;
-  }
-  #drawer_content_pre {
-    overflow: auto;
-    height: calc(100% - 50px);
-    background: #FFF;
-  }
-}
-</style>
+
+<!-- preview-pdf
+  组件主要负责 知识项目中 文件的预览，携带定位信息参数 tagIds tagId 的会解析文件增加定位功能
+  不携带定位信息的 也是走 kkview项目预览
+  另外增加了在知识项目中预览当前文件的一些功能
+-->
+<template>
+    <!-- <van-popup v-model="previewShowPopup" position="bottom" :style="{ height: '90%', background:'#FFFFFF'}" v-if="previewShowPopup">
+      <div class="footer">
+        <span>查看详情</span>
+            <section @click="close">
+            <i class="iconfont guoran-shanchu"></i>
+            </section>
+        </div>
+        <template v-if="tagIds && tagIds.length != 0 && previewShowPopup">
+            <pdfPosition :tagIds="tagIds" ></pdfPosition>
+        </template>
+        <template v-else>
+          <div v-if="fileType == 'VIDEO'" style="width: 100%;height: calc(100% - 60px)">
+              <video :src="url" controls width="100%;" height="98%"></video>
+          </div>
+          <div v-else-if="fileType == 'HTML'" style="width: 100%;height: calc(100% - 60px)">
+              <div class="preview_iframe_html" style="text-algin:left" v-html="fileText"></div>
+          </div>
+          <template v-else-if="url.includes('https://www') || url.includes('http://www')">
+              <iframe class="preview_iframe"
+                      :src="url"
+                      width="100%"
+                      height="100%"
+                      scrolling="100%"
+                      frameborder="no"
+                      border="0"></iframe>
+          </template>
+          <template v-else>
+            <iframe class="preview_iframe" :src="previewUrl" style="border:none;"></iframe>
+          </template>
+        </template>
+        <div class="loading_img" v-show="loading">
+            <img src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif" alt="">
+        </div>
+    </van-popup> -->
+  <el-drawer
+      title="我是标题"
+      :visible.sync="drawer"
+      :with-header="false"
+      :append-to-body="true"
+      :destroy-on-close="true"
+      :modal="false"
+      :direction="previewShowPopup ? 'btt' : 'rtl'"
+      :size="previewShowPopup ? '90%' : '65%'"
+      custom-class="pdf-preview-drawer"
+      v-if="drawer"
+  >
+    <!-- v-else-if="drawer" -->
+    <div class="drawer-footer">
+      <span>{{title ? title : "查看详情"}}</span>
+      <div class="header-right">
+        <div class="onload_btn" v-if="isDownload && isPc" @click="downLoad">
+          下载
+        </div>
+        <div class="summaryBtn"
+             :class="showSummary ? 'summaryActiveBtn' : ''"
+             @click="summaryFun"
+             v-if="isHasChat"
+        >
+          <i class="iconfont guoran-tongyichicun-write-29-jiqiren"></i>
+          <span>智能摘要</span>
+        </div>
+        <template v-if="isHasChat">
+          <div class="chat" @click="previewToDialog(true)" v-if="!previewKnowledgeId">
+            <i class="iconfont guoran-wendapingjia"></i>
+            聊一聊
+          </div>
+          <div class="chat chat_active" @click="previewToDialog(false)" v-else>
+            <i class="iconfont guoran-wendapingjia"></i>
+            聊一聊
+          </div>
+        </template>
+        <section @click="close">
+          <i class="iconfont guoran-shanchu"></i>
+        </section>
+      </div>
+    </div>
+    <div id="drawer_content_pre">
+      <!-- :style="{marginTop:tagIds && tagIds.length != 0 && isPc ? '50px' : ''}" -->
+      <intelligent-summary
+          v-show="showSummary && isHasChat"
+          :tagIds="tagIds"
+          :knowledgeId="knowledgeId"
+          @closeSummary="closeSummary"
+          @recommendQues="recommendQues"
+          @getSummarySuccess="getSummarySuccess"
+      ></intelligent-summary>
+      <div class="pdf_positon" :style="pdfStyle" v-if="tagIds && tagIds.length != 0 && drawer">
+        <pdfPosition :tagIds="tagIds" :isMessageRecord="isMessageRecord" :textWatermarkStr="textWatermarkStr"></pdfPosition>
+      </div>
+      <template v-else>
+        <div v-if="fileType == 'VIDEO'" style="width: 100%;">
+          <video :src="url" controls width="100%;" height="98%"></video>
+        </div>
+        <div v-else-if="fileType == 'HTML'" style="width: 100%;">
+          <div class="preview_iframe_html" style="text-algin:left" v-html="fileText"></div>
+        </div>
+        <template v-else-if="url.includes('https://www') || url.includes('http://www')">
+          <iframe class="preview_iframe"
+                  :src="url"
+                  width="100%"
+                  height="100%"
+                  scrolling="100%"
+                  frameborder="no"
+                  border="0"></iframe>
+        </template>
+        <template v-else>
+          <iframe class="preview_iframe_kk" :src="previewUrl" style="border:none;"  :style="{height: iframeHeight}"></iframe>
+        </template>
+      </template>
+      <div class="mobile_onload_btn" v-if="isDownload && !isPc" @click="downLoad">
+        下载
+      </div>
+    </div>
+    <div class="loading_img" v-show="loading">
+            <img src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif" alt="">
+        </div>
+  </el-drawer>
+</template>
+
+<script>
+import pdfPosition from './pdfPosition.vue'
+import { zoomElement } from '../assets/js/hammer'
+import IntelligentSummary from "./intelligentSummary";
+import { isMobile } from "../assets/js/common";
+import { Toast } from 'vant';
+export default {
+    data () {
+        return {
+            previewShowPopup: false,
+            fileText:'',
+            fileType:"",
+            isPc:false,
+            drawer:false,
+            tagIds: [],
+            // '6454aa1a70573a6ead6f0f7d', '6454aa1a70573a6ead6f0f81',
+            loading:true,
+            fileName:'',
+            previewKnowledgeId:"",
+            showSummary:true,
+            iframeHeight:"100%",
+            isDownload:false,
+            textWatermarkStr:""
+        }
+    },
+    mounted() {
+      window.addEventListener('message',this.handleIframeMessage,false);
+      this.isPcFun();
+    },
+    props:{
+        url:{
+            type: String,
+            required: true,
+        },
+        officePreviewType:{
+            type: String,
+            default: ''
+        },
+        isMessageRecord:{
+          type: Boolean,
+          default:false,
+        },
+        sourceFileType:{
+          type: String,
+          default: '',
+        },
+        title: {
+          type: String,
+          default: ''
+        },
+        isHasChat:{
+            type:Boolean,
+          default:false
+        },
+        knowledgeId:{
+          type: String,
+          default: '',
+        },
+        previewOssPath:{
+          type: String,
+          default: '',
+        }
+    },
+    components:{
+      IntelligentSummary,
+      pdfPosition
+    },
+    watch:{
+      drawer(value) {
+        if(value) {
+          this.$emit('open')
+          this.$nextTick(() =>{
+            if (this.tagIds && this.tagIds.length != 0){
+              zoomElement(document.getElementById('pdf_container_view'))
+            }
+          })
+        } else {
+          this.$emit('close')
+        }
+        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'
+            }
+          })
+        })
+      },
+      showSummary:{
+        handler(val){
+          // if (!val){
+          //   this.$nextTick(() => {
+          //     let preCon = document.querySelector('.pdf_view');
+          //     if (preCon){
+          //       preCon.style.height = 'calc(100% - ' + 50 + 'px)'
+          //     }
+          //   })
+          // } else {
+          //   this.getSummarySuccess();
+          // }
+          if(val) {
+            this.getSummarySuccess();
+          }
+        }
+      },
+      knowledgeId:{
+        handler(val){
+          if (val){
+            this.getTextWatermark();
+          }
+        }
+      }
+    },
+    computed:{
+        pdfStyle() {
+          return {
+            paddingTop: this.isPc ? '30px' : '0', // 30px 是 加上外层的 20 流出 50的上边距展示 放大缩小操作栏
+            paddingBottom: this.tagIds > 1 ? '60px' : '0',
+            height: '100%'
+          }
+        },
+        previewUrl() {
+            console.debug('VUE_APP_ENV',process.env.VUE_APP_ENV)
+            let url = process.env.VUE_APP_ENV === 'production' ? 'https://kkfileview.askbot.cn/onlinePreview?url=' : 'https://test.open.askbot.cn/kkfileview/onlinePreview?url='
+            // if(this.url != '') {
+            //     if(/[\u4E00-\u9FA5]+/g.test(this.url)) {
+            //         url += btoa(encodeURIComponent(this.url))
+            //     } else {
+            //         url += btoa(this.url)
+            //     }
+            // }
+            url = url + this.url
+            url += '&officePreviewType=pdf'
+            if(this.watermark) {
+              url = this.watermark.textWatermarkValue ? (url += '&textWatermarkValue=' + this.watermark.textWatermarkValue) : url
+              url = this.watermark.visitorWatermarkValue ? (url += '&visitorWatermarkValue=' + this.watermark.visitorWatermarkValue) : url
+            }
+            console.log('textWatermarkStr 216',this.textWatermarkStr)
+            if (this.textWatermarkStr){
+              url += '&textWatermarkValue=' + this.textWatermarkStr
+            }
+            return url
+        },
+        // fileType() {
+        //     const fileType = this.url.substring(this.url.lastIndexOf('.'));
+        //     if (fileType === '.mp4' || fileType === '.MP4'  || fileType === '.MOV'  || fileType === '.mov') {
+        //         return 'VIDEO'
+        //     } else {
+        //         return 'OTHER'
+        //     }
+
+        // }
+    },
+    methods :{
+        close() {
+          setTimeout(() =>{
+            this.previewShowPopup = false;
+            this.fileType = ''
+          }, 300)
+          this.drawer = false;
+          this.showSummary = false;
+        },
+        loadIframe() {
+
+            if(this.fileType == 'VIDEO' || this.fileType == 'WECHAT' || (this.tagIds && this.tagIds.length != 0)) {
+                this.loading = false
+            } else {
+              let iframe = document.getElementsByClassName('preview_iframe')[0] || document.getElementsByClassName('preview_iframe_kk')[0];
+              if (iframe){
+                iframe.onload = () => {
+                  this.loading = false;
+                  document.getElementById('drawer_content_pre').style.backgroundImage = 'none'
+                }
+              }
+              // let time = setInterval(() =>{
+              //
+              //   if(iframe) {
+              //       this.loading = false
+              //       clearInterval(time)
+              //   }
+              // }, 500)
+            }
+        },
+        getBolb() {
+            this.$http.post('/knowledge-api/knowledge/htmlTextDeal?onlyText=false',{
+                fileInOssPath: this.url,
+                templateId: ''
+            }).then(res =>{
+                if (res.data.code == 0) {
+                    this.fileText = res.data.data
+                    this.loading = false
+				}
+            })
+        },
+      previewToDialog(flag){
+        this.$emit('previewToDialog',flag)
+      },
+      closeSummary(){
+        this.showSummary = false;
+      },
+      recommendQues(item,knowledgeId){
+        console.log('recommendQues',item,knowledgeId);
+        this.$emit('recommendQues',item,knowledgeId)
+      },
+      handleIframeMessage(res){
+        console.log('handleIframeMessage',res)
+        if (res.data.type == 'getViewerHeight'){
+          let iframeHeight = this.iframeHeight.replace('px','')
+          if (res.data.data && iframeHeight != (res.data.data + 50)){
+            this.iframeHeight = res.data.data + 50 + 'px'
+          }
+        }
+      },
+      summaryFun(){
+          this.showSummary = !this.showSummary;
+          if (this.showSummary){
+            document.getElementById('drawer_content_pre').scrollTop = 0;
+          }
+      },
+      getSummarySuccess(){
+        this.$nextTick(() => {
+          // if (this.tagIds.length > 0){
+          //   let intelligentSummary = document.getElementById('intelligentSummary');
+          //   let preCon = document.querySelector('.pdf_view')
+          //   if (intelligentSummary){
+          //     let height = intelligentSummary.offsetHeight + (this.isPc ? 100 : 50 );
+          //     if (preCon){
+          //       preCon.style.height = 'calc(100% - ' + height + 'px)'
+          //     }
+          //     console.log('height',height,preCon)
+          //   }
+          // }
+          let intelligentSummary = document.getElementById('intelligentSummary');
+          let height = intelligentSummary.offsetHeight
+          this.pdfStyle.height = 'calc(100% - ' + height + 'px)'
+        })
+      },
+      getTextWatermark(){
+        let url = '/knowledge-api/open/knowledge/getPermissionInfo';
+        let obj = {
+          "knowledgeId":this.knowledgeId,
+          "userId":sessionStorage.getItem('_currentUserId'),
+          "mainId":sessionStorage.getItem('_mainId'),
+          "corpId":sessionStorage.getItem('_corpid')
+        }
+        this.$http.post(url,obj).then(res => {
+          console.log('getTextWatermark',res.data.data)
+          if (res.data.data){
+            this.textWatermarkStr = res.data.data.textWatermarkStr;
+            this.isDownload = res.data.data.showDownloadBtn;
+          }
+        })
+      },
+      downLoad () {
+        let url = this.previewOssPath
+        if (decodeURIComponent(url) != url) {
+          url = decodeURIComponent(url)
+        }
+        const fileType = url.substring(url.lastIndexOf('.'));
+        this.$http.post('/knowledge-api/temporary-certificate/or-origin?expired=10', url, {
+          headers:{
+            "Content-Type": "application/json",
+          }
+        }).then(res => {
+          console.log('downLoad 341',res)
+          if (res.data) {
+            if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
+              if(isMobile()) {
+                setTimeout(() =>{
+                  const range = document.createRange();
+                  range.selectNode(document.getElementById('text'));
+                  const selection = window.getSelection();
+                  //移除之前选中内容
+                  if (selection.rangeCount > 0) selection.removeAllRanges();
+                  selection.addRange(range);
+                  document.execCommand('copy');
+                  selection.removeAllRanges()
+                  Toast('下载地址已复制，请前往Safari浏览器访问下载');
+                  this.close()
+                },100)
+              } else {
+                navigator.clipboard.writeText(res.data)
+                this.$message.success({
+                  message:'下载地址已复制，请前往Safari浏览器访问下载',
+                })
+              }
+              return
+            } else {
+              // setTimeout(() =>{
+              //   window.open(res.data,'下载', 'noopener')
+              // }, 2000)
+              // window.open(res.data,'下载', 'noopener')
+              if(isMobile()) {
+                const iframe = document.createElement("iframe");
+                iframe.setAttribute("hidden", "hidden");
+                iframe.onload = () => {
+                  if (iframe) {
+                    console.log("iframe onload....")
+                    iframe.setAttribute('src', 'about:blank');
+                  }
+                };
+                document.body.insertBefore(iframe, null);
+                iframe.setAttribute("src", res.data);
+              } else {
+                let a = document.createElement('a')
+                a.href = res.data
+                a.download = (this.title) + fileType
+                a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
+              }
+              this.close()
+            }
+          }
+        })
+      },
+      isPcFun(){
+        if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
+          this.isPc = false
+        } else {
+          this.isPc = true
+        }
+      }
+    },
+    beforeDestroy() {
+      window.removeEventListener('message', this.handleIframeMessage);
+    }
+}
+</script>
+
+<style lang="less" scoped>
+#drawer_content_pre{
+  padding: 20px;
+  scroll-behavior: smooth;
+  .mobile_onload_btn{
+    position: absolute;
+    right: 0;
+    bottom: 10%;
+    width: 20px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    color: #366aff;
+    background: #ffffff;
+    border: 1px solid #a1b9ff;
+    font-size: 12px;
+    border-right: none;
+    text-align: center;
+  }
+  .pdf_positon {
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+.onload_btn {
+  width: 80px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin-right: 10px;
+  border-radius: 15px;
+  color: #366aff;
+  background: #ffffff;
+  border: 1px solid #a1b9ff;
+}
+.preview_iframe {
+    width: 100%;
+    height: 100%;
+    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;
+}
+.preview_iframe_kk{
+  width: 100%;
+  height: 100%;
+}
+.preview_iframe_html{
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  text-align: left;
+  box-sizing: border-box;
+  padding: 16px;
+  /deep/.lake-content{
+    margin-left: 10px;
+  }
+  /deep/a:link {
+    color: #0000ee!important;
+  }
+  /deep/a:visited {
+    color: #0000ee!important;
+  }
+  /deep/a:hover {
+    color: #0000ee!important;
+  }
+  /deep/a:active {
+    color: #0000ee!important;
+  }
+  /deep/li:not(.rich-text-li), ol:not(.list-paddingleft-2), ul:not(.list-paddingleft-2){
+    list-style-type: auto!important;
+  }
+  /deep/img{
+    width: 100%;
+  }
+  /deep/.ne-table{
+    width: 100% !important;
+  }
+}
+.footer {
+    width: calc(100% - 40px);
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    padding: 0 20px;
+    border-bottom: 1px solid #cccccc;
+}
+.loading_img {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #FFF;
+    img {
+        width: 50px;
+        height: 50px;
+    }
+}
+
+.drawer-footer{
+  width:100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  padding: 0 20px;
+  border-bottom: 1px solid #cccccc;
+  .header-right{
+    display: flex;
+    align-items: center;
+    .summaryBtn{
+      flex: none;
+      //width: 95px;
+      height: 26px;
+      padding: 0 10px;
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border: 1px solid #a1b9ff;
+      border-radius: 15px;
+      cursor: pointer;
+      color: #366aff;
+      margin-right: 10px;
+      font-size: 14px;
+      i {
+        font-size: 18px;
+        margin: 0 5px;
+      }
+    }
+    .summaryActiveBtn{
+      background: #366aff !important;
+      color: #ffffff !important;
+    }
+    .chat {
+      width: 95px;
+      height: 26px;
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border: 1px solid #a1b9ff;
+      border-radius: 15px 0px 15px 15px;
+      cursor: pointer;
+      color: #366aff;
+      margin-right: 10px;
+      font-size: 14px;
+      i {
+        font-size: 16px;
+        margin: 0 5px;
+      }
+    }
+    .chat_active {
+      background: #366aff !important;
+      color: #FFFFFF !important;
+    }
+  }
+}
+@media screen and (max-width: 767px) {
+/* 这里是针对移动设备的css样式设置 */
+  /deep/.el-drawer__body{
+    height: 100%;
+  }
+  #drawer_content_pre {
+    overflow: auto;
+    height: calc(100% - 50px);
+    background: #FFF;
+  }
+}
+@media screen and (min-width: 768px) {
+/* 这里是针对pc设备的css样式设置 */
+  /deep/.el-drawer__body{
+    height: 100%;
+  }
+  #drawer_content_pre {
+    overflow: auto;
+    height: calc(100% - 50px);
+    background: #FFF;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+/* 这里是针对pc设备的css样式设置 */
+  .el-drawer__wrapper {
+    width: 55%;
+    left: calc(100vw - 55%);
+    right: 0;
+    /deep/.pdf-preview-drawer {
+      width: 100% !important;
+    }
+  }
+  /deep/.el-drawer__body{
+    height: 100%;
+  }
+  #drawer_content_pre {
+    overflow: auto;
+    height: calc(100% - 50px);
+    background: #FFF;
+  }
+}
+</style>