导出确权pdf

src/views/authentic/Pdf.vue

@@ -7,11 +7,11 @@
       @close="closeDialog()"
   >
     <div  class="pdf-main">
+      <div class="title" >
+        <div class="name" ></div>
+        <div class="pdf-close cursor-pointer" @click="closeDialog"></div>
+      </div>
       <div id="printTest" class="pdf-dialog-box">
-        <div class="title" >
-          <div class="name" ></div>
-          <div class="pdf-close cursor-pointer" @click="closeDialog"></div>
-        </div>
         <div class="pdf-my-body"  >
         <div class="pdfBox" >
           <div class="a4" >
@@ -47,10 +47,10 @@
           </div>
         </div>
       </div>
-        <div style="text-align: left">
-          <el-button size="large" color="#626aef"    v-print="'#printTest'">打印</el-button>
-<!--          <el-button size="large" color="#626aef"  @click="closeDialog">关闭</el-button>-->
-        </div>
+      </div>
+      <div style="text-align: left">
+        <el-button size="large" color="#626aef"  v-print="printObj">打印</el-button>
+        <!--          <el-button size="large" color="#626aef"  @click="closeDialog">关闭</el-button>-->
       </div>
 
     </div>
@@ -61,7 +61,6 @@
 import {reactive, ref, toRefs, computed, nextTick, onMounted} from "vue";
 import {useStore} from "vuex";
 import {WKT} from "ol/format";
-import html2canvas from "html2canvas"
 import PdfMap from "./pdfMap";
 import { dateFormat } from "@/utils/date_util";
 import {getAreaByWkt} from "../../utils/map";
@@ -89,6 +88,21 @@ const props = defineProps({
   }
 });
 
+let printObj = {
+  id:"printTest",
+  popTitle: 'good print',
+  beforeOpenCallback (vue) {
+    toImg(pdfMap.kmap.map)
+    console.log('打开之前')
+  },
+  openCallback (vue) {
+    console.log('执行了打印')
+  },
+  closeCallback (vue) {
+    console.log('关闭了打印工具')
+  }
+}
+
 let imgUrl = ref(null)
 const executor = ref([])
 const executorList = ref([])
@@ -111,15 +125,6 @@ function  toImg(map) {
 }
 
 
-/**表单验证规则
- * @description:
- * @param {*} computed
- * @return {*}
- */
-const rules = computed(() => ({
-}));
-
-
 let pdfMap = new PdfMap()
 let rowData = ref({})
 
@@ -130,12 +135,8 @@ onMounted(()=>{
     data.area = getAreaByWkt(data.geom)
     rowData.value = data
     pdfMap.initMap(data,mapRef.value)
-    setTimeout(function(){
-      toImg(pdfMap.kmap.map)
-    },2000)
   })
 })
-
 </script>
 
 <style lang="scss" scoped>
@@ -152,11 +153,6 @@ $body-height:calc(100% - $title-height);
   border-radius: 4px;
   border: 2px solid rgba(81,233,240,0.6);
   position: absolute;
-}
-.pdf-dialog-box{
-  font-family: PingFangSC-Regular, PingFang SC;
-  width: 100%;
-  height: 100%;
   .title{
     width: 100%;
     height: $title-height;
@@ -181,6 +177,11 @@ $body-height:calc(100% - $title-height);
       background-size: 100% 100%;
     }
   }
+}
+.pdf-dialog-box{
+  font-family: PingFangSC-Regular, PingFang SC;
+  width: 100%;
+  height: 100%;
   .pdf-my-body{
     width: 100%;
     height: $body-height;

src/views/authentic/pdfMap.js

@@ -95,6 +95,7 @@ class PdfMap {
     this.kmap.addLayer(this.clickPointLayer.layer);
     this.kmap.addLayer(this.locationLayer.layer);
     this.getSelectPointArr(data.id)
+    this.lock(false)
   }
 
   getSelectPointArr(id) {
@@ -128,6 +129,33 @@ class PdfMap {
     );
     this.clickPointLayer.source.addFeatures(arrPoints);
   }
+
+  lock(lockval) {
+    let pan;
+    let mousezoom;
+    this.kmap.map.getInteractions().forEach(function (element) {
+      if (element instanceof DragPan)//获取 控制能否使用鼠标，手指拖动地图的对象
+        pan = element;
+      if(element instanceof MouseWheelZoom)//获取 控制能否使用滚轮滚动放大缩小地图的对象
+        mousezoom = element;
+      if (pan) {
+        if (lockval) {
+          pan.setActive(true);//此对象的setActive方法用来设置是否可以拖动滚动查看
+        }
+        else {
+          pan.setActive(false);
+        }
+      }
+      if (mousezoom) {
+        if (lockval) {
+          mousezoom.setActive(true);
+        }
+        else {
+          mousezoom.setActive(false);
+        }
+      }
+    });
+  }
 }
 
 export default PdfMap;