事件详情地图

src/views/eventdetailsdialog.vue

@@ -3,7 +3,7 @@
     <!--头部-->
     <vheader></vheader>
     <!--主体-->
-    <div class="visual-body">
+    <div class="visual-body" >
       <button @click="showEventDialog"
               style="position: absolute; left:50%;top: 50vh; transform: translateX(-50%);">触发事件详情</button>
       <!-- 弹层 -->
@@ -12,7 +12,7 @@
         <div class="dia-event-info">
           <el-row>
             <!-- 左侧 -->
-            <el-col :span="18" class="dia-left">
+            <el-col :span="18" class="dia-left"  ref="imageTofile">
               <!-- 应急预案 -->
               <div class="dia-left-top">
                 <div class="dia-left-top-tit">应急预案</div>
@@ -46,14 +46,14 @@
               <!-- 左侧资源end -->
               <!-- 底部工具栏 -->
               <div class="dia-left-btm-tool">
-
               </div>
               <!-- 底部工具栏end -->
-			  <!-- 地图 -->
-			  <supermapDialog ref="supermapDialog" :dynamicPlotting="true"
-			                  style="width:100% ;height: 75vh; position: absolute; top:0;left: 0;" :mapDiv="'forestWarmSuperMap'"
-			                  :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" @preview="preview"
-			                  :isSideBySide="false"></supermapDialog>
+              <!-- 地图 -->
+              <supermapDialog ref="supermapDialog"  :dynamicPlotting="true"
+                              style="width:100% ;height: 75vh; position: absolute; top:0;left: 0;" :mapDiv="'forestWarmSuperMap'"
+                              :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" @preview="preview"
+                              :isSideBySide="false"></supermapDialog>
+              <!-- 地图end -->
             </el-col>
             <!-- 左侧end -->
             <!-- 右侧 -->
@@ -107,7 +107,7 @@
                                 </el-button>
                                 <el-button size="small" icon="el-icon-upload">上传
                                 </el-button>
-                                <el-button size="small" icon="el-icon-download">保存
+                                <el-button size="small" icon="el-icon-download" @click="toImage()">保存
                                 </el-button>
                               </div>
                               <div class="z-info-btm-grp-right">
@@ -143,6 +143,7 @@
 </template>
 
 <script>
+import html2canvas from "html2canvas";//截图组件
 import supermapDialog from '@/components/supermap' //超图
 import vheader from '@/components/v-header.vue' //一体化共用头部
 import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
@@ -211,7 +212,45 @@ export default {
     showEventDialog(id) {
       alert(id)
       this.eventDialog = true
-    }
+    },
+    // 页面元素转图片
+    toImage () {
+      // 手动创建一个 canvas 标签
+      const canvas = document.createElement("canvas")
+      // 获取父标签，意思是这个标签内的 DOM 元素生成图片
+      // imageTofile是给截图范围内的父级元素自定义的ref名称
+      let canvasBox = this.$refs.imageTofile
+      debugger
+      // 获取父级的宽高
+      const width = parseInt(window.getComputedStyle(canvasBox).width)
+      const height = parseInt(window.getComputedStyle(canvasBox).height)
+      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
+      canvas.width = width * 2
+      canvas.height = height * 2
+      canvas.style.width = width + 'px'
+      canvas.style.height = height + 'px'
+      const context = canvas.getContext("2d");
+      context.scale(2, 2);
+      const options = {
+        backgroundColor: null,
+        canvas: canvas,
+        useCORS: true
+      }
+      html2canvas(canvasBox, options).then((canvas) => {
+        // toDataURL 图片格式转成 base64
+        let dataURL = canvas.toDataURL("image/png")
+        console.log(dataURL)
+        this.downloadImage(dataURL)
+      })
+    },
+    //下载图片
+    downloadImage(url) {
+      // 如果是在网页中可以直接创建一个 a 标签直接下载
+      let a = document.createElement('a')
+      a.href = url
+      a.download = '首页截图'
+      a.click()
+    },
   }
 }
 </script>