同屏对比的打印功能标记显示异常BUG修复。

同屏对比默认显示底图已通过DMS控制（地图底图服务模型添加字段c_defined_show:是否默认显示）。

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "axios": "^1.1.3",
+    "canvg": "^4.0.1",
     "core-js": "^3.8.3",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.6",

src/components/common/BottomForm/SameScreenComparison.vue

@@ -3,6 +3,7 @@
   <el-dialog
     title="同屏对比"
     fullscreen
+    v-loading="doPrintLoading"
     :visible.sync="dialogVisible"
     :before-close="handleClose"
     @mousedown="changeMouseDownStatus(true)"
@@ -87,11 +88,13 @@
  */
 import Map from "../../map/Map.vue";
 import html2canvas from "html2canvas";
+import { Canvg } from "canvg";
 export default {
   name: "SameScreenComparison",
   components: { Map },
   data() {
     return {
+      doPrintLoading: false,
       // 同屏对比弹窗显示状态
       dialogVisible: false,
       // 默认选中第一个
@@ -158,11 +161,9 @@ export default {
             this.mapList.unshift({
               mapName: v.title,
               mapUrl: v.c_url + localStorage.getItem("TOKEN"),
-              active: false
+              active: v.c_defined_show ? v.c_defined_show : false
             });
           });
-          this.mapList[0].active = true;
-          // console.log(this.mapList);
         }
       });
     },
@@ -183,26 +184,16 @@ export default {
     handleClose() {
       if (this.dialogVisible) {
         this.clearDialogVisible();
-        // this.$confirm("确认关闭？")
-        //   .then((_) => {
-        //     this.clearDialogVisible();
-        //   })
-        //   .catch((_) => {});
       }
     },
     // 同屏对比取消
     clearDialogVisible() {
-      if (this.interval) {
-        this.$message.info("取消打印！");
-        this.clearDiyInterval();
-      } else {
-        // 关闭弹窗
-        this.dialogVisible = false;
-        // 获取地图光标暂存对象
-        this.mouseIndex = -1;
-        // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
-        this.$emit("changeShowBottomMenusStatus", true);
-      }
+      // 关闭弹窗
+      this.dialogVisible = false;
+      // 获取地图光标暂存对象
+      this.mouseIndex = -1;
+      // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
+      this.$emit("changeShowBottomMenusStatus", true);
     },
     // 同屏对比表单提交
     subMitDialogVisible() {
@@ -214,47 +205,109 @@ export default {
     },
     // div转图片
     cutDiv() {
-      var container = document.getElementById("doPrint").innerHTML;
-      const _width = container.offsetWidth;
-      const _height = container.offsetHeight;
-      const ops = {
-        _width,
-        _height,
-        useCORS: true,
-        allowTaint: false
-      };
-      let that = this;
-      html2canvas(this.$refs.doPrint, ops).then(canvas => {
-        document.getElementById("imgOut").setAttribute("src", canvas.toDataURL("image/png"));
-      });
-
-      this.interval = setInterval(() => {
-        if ($("#imgOut").attr("src")) {
-          that.clearDiyInterval();
-          setTimeout(() => {
-            that.doPrint();
-          }, 500);
+      try {
+        this.doPrintLoading = true;
+        var container = document.getElementById("doPrint").innerHTML;
+        const _width = container.offsetWidth;
+        const _height = container.offsetHeight;
+        const ops = {
+          _width,
+          _height,
+          useCORS: true,
+          allowTaint: true
+        };
+        let that = this;
+        let parentNodeList = [];
+        let svgElemNodeList = [];
+        let canvasList = [];
+        //以下是对svg的处理(主要处理html2canvas插件显示SVG标签异常的问题)
+        var svgElem = $("#doPrint").find("svg");
+        svgElem.each(function (index, node) {
+          var parentNode = node.parentNode;
+          parentNodeList.push(parentNode);
+          var svg = node.outerHTML.trim();
+          svgElemNodeList.push(node);
+          var canvas = document.createElement("canvas");
+          canvas.className = "mapSvgCanvas";
+          let cxt = canvas.getContext("2d");
+          if (node.style.position) {
+            canvas.style.position += node.style.position;
+            canvas.style.left += node.style.left;
+            canvas.style.top += node.style.top;
+          }
+          if (node.clientWidth && node.clientHeight) {
+            canvas.setAttribute("width", node.clientWidth + "px");
+            canvas.setAttribute("height", node.clientHeight + "px");
+          }
+          if (node.style.transform) {
+            canvas.style.transform = node.style.transform;
+          }
+          const cv = Canvg.fromString(cxt, svg);
+          cv.render();
+          canvasList.push(canvas);
+          // 隐藏原本的node元素
+          parentNode.removeChild(node);
+          // 添加svg转换后的canvas元素
+          parentNode.appendChild(canvas);
+        });
+        // html2canvas插件实现dom转imageBase64
+        html2canvas(this.$refs.doPrint, ops).then(
+          canvas => {
+            document.getElementById("imgOut").setAttribute("src", canvas.toDataURL("image/png"));
+            setTimeout(() => {
+              if (that.doPrintLoading) {
+                that.doPrint(parentNodeList, svgElemNodeList, canvasList);
+              }
+            }, 1000);
+          },
+          error => {
+            that.$message.error(error);
+            this.showMapSvgAndRemoveMapCanvas(parentNodeList, svgElemNodeList, canvasList);
+            this.doPrintLoading = false;
+          }
+        );
+        setTimeout(() => {
+          if (this.doPrintLoading) {
+            this.$message.error("打印超时请稍后重试！");
+            this.showMapSvgAndRemoveMapCanvas(parentNodeList, svgElemNodeList, canvasList);
+            this.doPrintLoading = false;
+          }
+        }, 10000);
+      } catch (e) {
+        if (this.doPrintLoading) {
+          this.$message.error("打印异常，异常信息：" + e);
+          this.showMapSvgAndRemoveMapCanvas(parentNodeList, svgElemNodeList, canvasList);
+          this.doPrintLoading = false;
         }
-      }, 500);
+      }
     },
-    clearDiyInterval() {
-      // 先销毁定时器
-      clearInterval(this.interval);
-      this.interval = "";
+    // 显示原本的svg并删除svg转换为canvas的元素
+    showMapSvgAndRemoveMapCanvas(parentNodeList, svgElemNodeList, canvasList) {
+      try {
+        parentNodeList.forEach((parentNodeListItem, index) => {
+          parentNodeListItem.appendChild(svgElemNodeList[index]);
+          parentNodeListItem.removeChild(canvasList[index]);
+        });
+      } catch (e) {
+        this.$message.error("打印异常，异常信息：" + e);
+        this.doPrintLoading = false;
+      }
     },
     // div打印（iframe的方式为最优）
-    doPrint() {
+    doPrint(parentNodeList, svgElemNodeList, canvasList) {
       // 将包含转为图片的div获取。
       var new_iframe = document.createElement("IFRAME");
       var doc = null;
       document.body.appendChild(new_iframe);
       doc = new_iframe.contentWindow.document;
       var obj = document.getElementById("imgBox");
-      doc.write('<div style="width:100%;height:auto;margin:0px;">' + obj.innerHTML + "</div>");
+      doc.write(obj.innerHTML);
       doc.close();
+      this.showMapSvgAndRemoveMapCanvas(parentNodeList, svgElemNodeList, canvasList);
+      this.doPrintLoading = false;
       new_iframe.contentWindow.focus();
       new_iframe.contentWindow.print();
-      // document.body.removeChild(iframe);
+      document.body.removeChild(new_iframe);
     },
     // 修改选中地图
     handleCheckedCitiesChange(e) {

src/main.js

@@ -11,7 +11,6 @@ import "./assets/font/font.css";
 import "./assets/global.css";
 import SvgIcon from "@/components/SvgIcon";
 Vue.component("svg-icon", SvgIcon);
-import $ from "jquery";
 import { drag } from "./directives/drag";
 import { get, post, postform, getFile } from "./utils/request.js";
 import urls from "./api/url";