fix: 优化打印方法（`Echarts`）

src/utils/print.ts

@@ -13,8 +13,6 @@ const Print = function (dom, options?: object): PrintFunction {
     styleStr: "",
     // Elements that need to dynamically get and set the height
     setDomHeightArr: [],
-    // Echart dom List
-    echartDomArr: [],
     // Callback before printing
     printBeforeFn: null,
     // Callback after printing
@@ -73,6 +71,8 @@ Print.prototype = {
     const inputs = document.querySelectorAll("input");
     const selects = document.querySelectorAll("select");
     const textareas = document.querySelectorAll("textarea");
+    const canvass = document.querySelectorAll("canvas");
+
     for (let k = 0; k < inputs.length; k++) {
       if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
         if (inputs[k].checked == true) {
@@ -108,6 +108,15 @@ Print.prototype = {
       }
     }
 
+    for (let k4 = 0; k4 < canvass.length; k4++) {
+      const imageURL = canvass[k4].toDataURL("image/png");
+      const img = document.createElement("img");
+      img.src = imageURL;
+      img.setAttribute("style", "max-width: 100%;");
+      img.className = "isNeedRemove";
+      canvass[k4].parentNode.insertBefore(img, canvass[k4].nextElementSibling);
+    }
+
     return this.dom.outerHTML;
   },
   /**
@@ -130,6 +139,12 @@ Print.prototype = {
     doc.open();
     doc.write(content);
     doc.close();
+
+    const removes = document.querySelectorAll(".isNeedRemove");
+    for (let k = 0; k < removes.length; k++) {
+      removes[k].parentNode.removeChild(removes[k]);
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const _this = this;
     iframe.onload = function (): void {
@@ -137,42 +152,16 @@ Print.prototype = {
       if (_this.conf.printBeforeFn) {
         _this.conf.printBeforeFn({ doc });
       }
-
-      _this.drawEchartImg(doc).then(() => {
-        _this.toPrint(w);
-        setTimeout(function () {
-          document.body.removeChild(iframe);
-          // After popup, callback
-          if (_this.conf.printDoneCallBack) {
-            _this.conf.printDoneCallBack();
-          }
-        }, 100);
-      });
+      _this.toPrint(w);
+      setTimeout(function () {
+        document.body.removeChild(iframe);
+        // After popup, callback
+        if (_this.conf.printDoneCallBack) {
+          _this.conf.printDoneCallBack();
+        }
+      }, 100);
     };
   },
-  /**
-   * echarts printing
-   * @param {Object} doc iframe window
-   */
-  drawEchartImg(doc): Promise<void> {
-    return new Promise<void>(resolve => {
-      if (this.conf.echartDomArr && this.conf.echartDomArr.length > 0) {
-        this.conf.echartDomArr.forEach(e => {
-          const dom = doc.querySelector("#" + e.$el.id);
-          const img = new Image();
-          const w = dom.offsetWidth + "px";
-          const H = dom.offsetHeight + "px";
-
-          img.style.width = w;
-          img.style.height = H;
-          img.src = e.imgSrc;
-          dom.innerHTML = "";
-          dom.appendChild(img);
-        });
-      }
-      resolve();
-    });
-  },
   /**
     Print
   */

src/views/able/print.vue

@@ -156,7 +156,7 @@ const tableData: User[] = [
         }"
       >
         <p class="font-medium pt-1">Echart</p>
-        <Line class="echart" style="margin: 0 auto; height: 300px" />
+        <Line class="echart" style="margin: 0 auto; height: 88%" />
       </el-col>
 
       <el-col