1

src/util/print.js

@@ -0,0 +1,163 @@
+// 打印类属性、方法定义
+/* eslint-disable */
+const Print = function (dom, options) {
+  if (!(this instanceof Print)) return new Print(dom, options);
+
+  this.options = this.extend({
+    'noPrint': '.no-print'
+  }, options);
+
+  if ((typeof dom) === "string") {
+    this.dom = document.querySelector(dom);
+  } else {
+    this.isDOM(dom)
+    this.dom = this.isDOM(dom) ? dom : dom.$el;
+  }
+
+  this.init();
+};
+Print.prototype = {
+  init: function () {
+    var content = this.getStyle() + this.getHtml();
+    this.writeIframe(content);
+  },
+  extend: function (obj, obj2) {
+    for (var k in obj2) {
+      obj[k] = obj2[k];
+    }
+    return obj;
+  },
+
+  getStyle: function () {
+    var str = "",
+      styles = document.querySelectorAll('style,link');
+    for (var i = 0; i < styles.length; i++) {
+      str += styles[i].outerHTML;
+    }
+    str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
+
+    return str;
+  },
+
+  getHtml: function () {
+    var inputs = document.querySelectorAll('input');
+    var textareas = document.querySelectorAll('textarea');
+    var selects = document.querySelectorAll('select');
+
+    for (var k = 0; k < inputs.length; k++) {
+      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
+        if (inputs[k].checked == true) {
+          inputs[k].setAttribute('checked', "checked")
+        } else {
+          inputs[k].removeAttribute('checked')
+        }
+      } else if (inputs[k].type == "text") {
+        inputs[k].setAttribute('value', inputs[k].value)
+      } else {
+        inputs[k].setAttribute('value', inputs[k].value)
+      }
+    }
+
+    for (var k2 = 0; k2 < textareas.length; k2++) {
+      if (textareas[k2].type == 'textarea') {
+        textareas[k2].innerHTML = textareas[k2].value
+      }
+    }
+
+    for (var k3 = 0; k3 < selects.length; k3++) {
+      if (selects[k3].type == 'select-one') {
+        var child = selects[k3].children;
+        for (var i in child) {
+          if (child[i].tagName == 'OPTION') {
+            if (child[i].selected == true) {
+              child[i].setAttribute('selected', "selected")
+            } else {
+              child[i].removeAttribute('selected')
+            }
+          }
+        }
+      }
+    }
+    // 包裹要打印的元素
+    // fix: https://github.com/xyl66/vuePlugs_printjs/issues/36
+    let outerHTML = this.wrapperRefDom(this.dom).outerHTML
+    return outerHTML;
+  },
+  // 向父级元素循环，包裹当前需要打印的元素
+  // 防止根级别开头的 css 选择器不生效
+  wrapperRefDom: function (refDom) {
+    let prevDom = null
+    let currDom = refDom
+    // 判断当前元素是否在 body 中，不在文档中则直接返回该节点
+    if (!this.isInBody(currDom)) return currDom
+
+    while (currDom) {
+      if (prevDom) {
+        let element = currDom.cloneNode(false)
+        element.appendChild(prevDom)
+        prevDom = element
+      } else {
+        prevDom = currDom.cloneNode(true)
+      }
+
+      currDom = currDom.parentElement
+    }
+
+    return prevDom
+  },
+
+  writeIframe: function (content) {
+    var w, doc, iframe = document.createElement('iframe'),
+      f = document.body.appendChild(iframe);
+    iframe.id = "myIframe";
+    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
+    iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
+    w = f.contentWindow || f.contentDocument;
+    doc = f.contentDocument || f.contentWindow.document;
+    doc.open();
+    doc.write(content);
+    doc.close();
+    var _this = this
+    iframe.onload = function(){
+      _this.toPrint(w);
+      setTimeout(function () {
+        document.body.removeChild(iframe)
+      }, 100)
+    }
+  },
+
+  toPrint: function (frameWindow) {
+    try {
+      setTimeout(function () {
+        frameWindow.focus();
+        try {
+          if (!frameWindow.document.execCommand('print', false, null)) {
+            frameWindow.print();
+          }
+        } catch (e) {
+          frameWindow.print();
+        }
+        frameWindow.close();
+      }, 10);
+    } catch (err) {
+      console.log('err', err);
+    }
+  },
+  // 检查一个元素是否是 body 元素的后代元素且非 body 元素本身
+  isInBody: function (node) {
+    return (node === document.body) ? false : document.body.contains(node);
+  },
+  isDOM: (typeof HTMLElement === 'object') ?
+    function (obj) {
+      return obj instanceof HTMLElement;
+    } :
+    function (obj) {
+      return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
+    }
+};
+const MyPlugin = {}
+MyPlugin.install = function (Vue, options) {
+  // 4. 添加实例方法
+  Vue.prototype.$print = Print
+}
+export default MyPlugin

src/views/adminCenter/test/parts/list-1.vue

@@ -0,0 +1,236 @@
+<template>
+  <div id="list-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col
+            :span="24"
+            class="list"
+            :style="{ width: company_cert_size.p0.width + 'px', height: company_cert_size.p0.height + 'px' }"
+            v-for="(item, index) in list"
+            :key="index"
+          >
+            <el-col :span="24" class="p1">
+              <span
+                class="p1_txt1"
+                :style="{
+                  top: company_cert_size.p1.top + 'px',
+                  right: company_cert_size.p1.right + 'px',
+                  bottom: company_cert_size.p1.bottom + 'px',
+                  left: company_cert_size.p1.left + 'px',
+                }"
+                >20210012</span
+              >
+            </el-col>
+            <el-col :span="24" class="p1">
+              <span
+                class="p1_txt2"
+                :style="{
+                  top: company_cert_size.p2.top + 'px',
+                  right: company_cert_size.p2.right + 'px',
+                  bottom: company_cert_size.p2.bottom + 'px',
+                  left: company_cert_size.p2.left + 'px',
+                }"
+                >长春市福瑞科技有限公司</span
+              >
+            </el-col>
+            <el-col :span="24" class="p1">
+              <span
+                class="p1_txt3"
+                :style="{
+                  top: company_cert_size.p3.top + 'px',
+                  right: company_cert_size.p3.right + 'px',
+                  bottom: company_cert_size.p3.bottom + 'px',
+                  left: company_cert_size.p3.left + 'px',
+                }"
+                >长春市朝阳区前进大街1244号一号楼南小二楼</span
+              >
+            </el-col>
+            <el-col :span="24" class="p1">
+              <span
+                class="p1_txt4"
+                :style="{
+                  top: company_cert_size.p4.top + 'px',
+                  right: company_cert_size.p4.right + 'px',
+                  bottom: company_cert_size.p4.bottom + 'px',
+                  left: company_cert_size.p4.left + 'px',
+                }"
+                >不知道</span
+              >
+            </el-col>
+            <el-col :span="24" class="p1">
+              <span
+                class="p1_txt5"
+                :style="{
+                  top: company_cert_size.p5.top + 'px',
+                  right: company_cert_size.p5.right + 'px',
+                  bottom: company_cert_size.p5.bottom + 'px',
+                  left: company_cert_size.p5.left + 'px',
+                }"
+                >门卫，巡逻，守护，随身收尾，安全检查，安全技术防范</span
+              >
+            </el-col>
+            <el-col :span="24" class="p1">
+              <span
+                class="p1_txt6"
+                :style="{
+                  top: company_cert_size.p6.top + 'px',
+                  right: company_cert_size.p6.right + 'px',
+                  bottom: company_cert_size.p6.bottom + 'px',
+                  left: company_cert_size.p6.left + 'px',
+                }"
+                >壹佰万元</span
+              >
+            </el-col>
+            <el-col :span="24" class="p1">
+              <span
+                class="p1_txt7"
+                :style="{
+                  top: company_cert_size.p7.top + 'px',
+                  right: company_cert_size.p7.right + 'px',
+                  bottom: company_cert_size.p7.bottom + 'px',
+                  left: company_cert_size.p7.left + 'px',
+                }"
+                >吉林省公保服20210012号</span
+              >
+            </el-col>
+            <el-col :span="24" class="p1">
+              <el-col
+                :span="12"
+                class="p1_txt8"
+                :style="{
+                  top: company_cert_size.p8.top + 'px',
+                  right: company_cert_size.p8.right + 'px',
+                  bottom: company_cert_size.p8.bottom + 'px',
+                  left: company_cert_size.p8.left + 'px',
+                }"
+              >
+                <p>温馨提示：此证有效期至2022年02月12日。</p>
+                <p>到期年检合格后，予以换证。</p>
+              </el-col>
+              <el-col
+                :span="6"
+                class="p1_txt9"
+                :style="{
+                  top: company_cert_size.p9.top + 'px',
+                  right: company_cert_size.p9.right + 'px',
+                  bottom: company_cert_size.p9.bottom + 'px',
+                  left: company_cert_size.p9.left + 'px',
+                }"
+              >
+                <span>2021</span><span>12</span><span>12</span>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'list-1',
+  props: { list: { type: Array }, company_cert_size: { type: Object } },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    .list {
+      border: 1px solid #ff0000;
+      .p1 {
+        position: relative;
+        .p1_txt1 {
+          position: absolute;
+          font-family: monospace;
+          font-size: 20px;
+          font-weight: bold;
+        }
+        .p1_txt2 {
+          position: absolute;
+          font-family: monospace;
+          font-size: 20px;
+          font-weight: bold;
+        }
+        .p1_txt3 {
+          position: absolute;
+          font-family: monospace;
+          font-size: 20px;
+          font-weight: bold;
+        }
+        .p1_txt4 {
+          position: absolute;
+          font-family: monospace;
+          font-size: 20px;
+          font-weight: bold;
+        }
+        .p1_txt5 {
+          position: absolute;
+          font-family: monospace;
+          font-size: 20px;
+          font-weight: bold;
+        }
+        .p1_txt6 {
+          position: absolute;
+          font-family: monospace;
+          font-size: 20px;
+          font-weight: bold;
+        }
+        .p1_txt7 {
+          position: absolute;
+          font-family: monospace;
+          font-size: 20px;
+          font-weight: bold;
+        }
+        .p1_txt8 {
+          position: absolute;
+          top: 625px;
+          right: 0;
+          bottom: 0;
+          left: 165px;
+          font-family: monospace;
+          font-size: 12px;
+          font-weight: bold;
+          text-align: center;
+          p {
+            margin: 0 0 5px 0;
+          }
+        }
+        .p1_txt9 {
+          position: relative;
+
+          font-family: monospace;
+          font-size: 20px;
+          font-weight: bold;
+          span {
+            display: inline-block;
+            margin: 0 0 0 50px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/adminCenter/test/parts/size-1.vue

@@ -0,0 +1,292 @@
+<template>
+  <div id="size-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-form ref="company_cert_size" :model="company_cert_size" label-width="100px">
+          <el-col :span="24" class="one">
+            <el-col :span="24" class="one_1">服务许可证尺寸</el-col>
+            <el-col :span="12">
+              <el-form-item label="宽度">
+                <el-input v-model="company_cert_size.p0.width"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="高度">
+                <el-input v-model="company_cert_size.p0.height"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="one">
+            <el-col :span="24" class="one_1">吉公保服</el-col>
+            <el-col :span="6">
+              <el-form-item label="上间距">
+                <el-input v-model="company_cert_size.p1.top"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="右间距">
+                <el-input v-model="company_cert_size.p1.right"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="下间距">
+                <el-input v-model="company_cert_size.p1.bottom"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="左间距">
+                <el-input v-model="company_cert_size.p1.left"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="one">
+            <el-col :span="24" class="one_1">名称</el-col>
+            <el-col :span="6">
+              <el-form-item label="上间距">
+                <el-input v-model="company_cert_size.p2.top"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="右间距">
+                <el-input v-model="company_cert_size.p2.right"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="下间距">
+                <el-input v-model="company_cert_size.p2.bottom"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="左间距">
+                <el-input v-model="company_cert_size.p2.left"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="one">
+            <el-col :span="24" class="one_1">住所</el-col>
+            <el-col :span="6">
+              <el-form-item label="上间距">
+                <el-input v-model="company_cert_size.p3.top"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="右间距">
+                <el-input v-model="company_cert_size.p3.right"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="下间距">
+                <el-input v-model="company_cert_size.p3.bottom"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="左间距">
+                <el-input v-model="company_cert_size.p3.left"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="one">
+            <el-col :span="24" class="one_1">法定代表人</el-col>
+            <el-col :span="6">
+              <el-form-item label="上间距">
+                <el-input v-model="company_cert_size.p4.top"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="右间距">
+                <el-input v-model="company_cert_size.p4.right"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="下间距">
+                <el-input v-model="company_cert_size.p4.bottom"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="左间距">
+                <el-input v-model="company_cert_size.p4.left"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="one">
+            <el-col :span="24" class="one_1">服务范围</el-col>
+            <el-col :span="6">
+              <el-form-item label="上间距">
+                <el-input v-model="company_cert_size.p5.top"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="右间距">
+                <el-input v-model="company_cert_size.p5.right"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="下间距">
+                <el-input v-model="company_cert_size.p5.bottom"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="左间距">
+                <el-input v-model="company_cert_size.p5.left"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="one">
+            <el-col :span="24" class="one_1">注册资本</el-col>
+            <el-col :span="6">
+              <el-form-item label="上间距">
+                <el-input v-model="company_cert_size.p6.top"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="右间距">
+                <el-input v-model="company_cert_size.p6.right"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="下间距">
+                <el-input v-model="company_cert_size.p6.bottom"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="左间距">
+                <el-input v-model="company_cert_size.p6.left"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="one">
+            <el-col :span="24" class="one_1">批准文号</el-col>
+            <el-col :span="6">
+              <el-form-item label="上间距">
+                <el-input v-model="company_cert_size.p7.top"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="右间距">
+                <el-input v-model="company_cert_size.p7.right"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="下间距">
+                <el-input v-model="company_cert_size.p7.bottom"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="左间距">
+                <el-input v-model="company_cert_size.p7.left"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="one">
+            <el-col :span="24" class="one_1">温馨提示</el-col>
+            <el-col :span="6">
+              <el-form-item label="上间距">
+                <el-input v-model="company_cert_size.p8.top"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="右间距">
+                <el-input v-model="company_cert_size.p8.right"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="下间距">
+                <el-input v-model="company_cert_size.p8.bottom"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="左间距">
+                <el-input v-model="company_cert_size.p8.left"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="one">
+            <el-col :span="24" class="one_1">发证日期</el-col>
+            <el-col :span="6">
+              <el-form-item label="上间距">
+                <el-input v-model="company_cert_size.p9.top"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="右间距">
+                <el-input v-model="company_cert_size.p9.right"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="下间距">
+                <el-input v-model="company_cert_size.p9.bottom"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="左间距">
+                <el-input v-model="company_cert_size.p9.left"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="btn">
+            <el-button type="danger" size="mini" @click="close">取消保存</el-button>
+            <el-button type="primary" size="mini" @click="onSubmit">提交保存</el-button>
+          </el-col>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'size-1',
+  props: {
+    company_cert_size: { type: Object },
+  },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+    onSubmit() {
+      this.$emit('onSubmit', { data: this.company_cert_size });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    .one_1 {
+      padding: 10px 0;
+      margin: 0 0 10px 0;
+      color: #000000;
+      font-size: 18px;
+      font-weight: bold;
+      border-bottom: 1px dashed #000000;
+    }
+    /deep/.el-form-item {
+      margin: 0;
+    }
+  }
+  .btn {
+    text-align: center;
+    margin: 20px 0 0 0;
+  }
+}
+</style>

src/views/print.js

@@ -0,0 +1,163 @@
+// 打印类属性、方法定义
+/* eslint-disable */
+const Print = function (dom, options) {
+  if (!(this instanceof Print)) return new Print(dom, options);
+
+  this.options = this.extend({
+    'noPrint': '.no-print'
+  }, options);
+
+  if ((typeof dom) === "string") {
+    this.dom = document.querySelector(dom);
+  } else {
+    this.isDOM(dom)
+    this.dom = this.isDOM(dom) ? dom : dom.$el;
+  }
+
+  this.init();
+};
+Print.prototype = {
+  init: function () {
+    var content = this.getStyle() + this.getHtml();
+    this.writeIframe(content);
+  },
+  extend: function (obj, obj2) {
+    for (var k in obj2) {
+      obj[k] = obj2[k];
+    }
+    return obj;
+  },
+
+  getStyle: function () {
+    var str = "",
+      styles = document.querySelectorAll('style,link');
+    for (var i = 0; i < styles.length; i++) {
+      str += styles[i].outerHTML;
+    }
+    str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
+
+    return str;
+  },
+
+  getHtml: function () {
+    var inputs = document.querySelectorAll('input');
+    var textareas = document.querySelectorAll('textarea');
+    var selects = document.querySelectorAll('select');
+
+    for (var k = 0; k < inputs.length; k++) {
+      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
+        if (inputs[k].checked == true) {
+          inputs[k].setAttribute('checked', "checked")
+        } else {
+          inputs[k].removeAttribute('checked')
+        }
+      } else if (inputs[k].type == "text") {
+        inputs[k].setAttribute('value', inputs[k].value)
+      } else {
+        inputs[k].setAttribute('value', inputs[k].value)
+      }
+    }
+
+    for (var k2 = 0; k2 < textareas.length; k2++) {
+      if (textareas[k2].type == 'textarea') {
+        textareas[k2].innerHTML = textareas[k2].value
+      }
+    }
+
+    for (var k3 = 0; k3 < selects.length; k3++) {
+      if (selects[k3].type == 'select-one') {
+        var child = selects[k3].children;
+        for (var i in child) {
+          if (child[i].tagName == 'OPTION') {
+            if (child[i].selected == true) {
+              child[i].setAttribute('selected', "selected")
+            } else {
+              child[i].removeAttribute('selected')
+            }
+          }
+        }
+      }
+    }
+    // 包裹要打印的元素
+    // fix: https://github.com/xyl66/vuePlugs_printjs/issues/36
+    let outerHTML = this.wrapperRefDom(this.dom).outerHTML
+    return outerHTML;
+  },
+  // 向父级元素循环，包裹当前需要打印的元素
+  // 防止根级别开头的 css 选择器不生效
+  wrapperRefDom: function (refDom) {
+    let prevDom = null
+    let currDom = refDom
+    // 判断当前元素是否在 body 中，不在文档中则直接返回该节点
+    if (!this.isInBody(currDom)) return currDom
+
+    while (currDom) {
+      if (prevDom) {
+        let element = currDom.cloneNode(false)
+        element.appendChild(prevDom)
+        prevDom = element
+      } else {
+        prevDom = currDom.cloneNode(true)
+      }
+
+      currDom = currDom.parentElement
+    }
+
+    return prevDom
+  },
+
+  writeIframe: function (content) {
+    var w, doc, iframe = document.createElement('iframe'),
+      f = document.body.appendChild(iframe);
+    iframe.id = "myIframe";
+    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
+    iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
+    w = f.contentWindow || f.contentDocument;
+    doc = f.contentDocument || f.contentWindow.document;
+    doc.open();
+    doc.write(content);
+    doc.close();
+    var _this = this
+    iframe.onload = function(){
+      _this.toPrint(w);
+      setTimeout(function () {
+        document.body.removeChild(iframe)
+      }, 100)
+    }
+  },
+
+  toPrint: function (frameWindow) {
+    try {
+      setTimeout(function () {
+        frameWindow.focus();
+        try {
+          if (!frameWindow.document.execCommand('print', false, null)) {
+            frameWindow.print();
+          }
+        } catch (e) {
+          frameWindow.print();
+        }
+        frameWindow.close();
+      }, 10);
+    } catch (err) {
+      console.log('err', err);
+    }
+  },
+  // 检查一个元素是否是 body 元素的后代元素且非 body 元素本身
+  isInBody: function (node) {
+    return (node === document.body) ? false : document.body.contains(node);
+  },
+  isDOM: (typeof HTMLElement === 'object') ?
+    function (obj) {
+      return obj instanceof HTMLElement;
+    } :
+    function (obj) {
+      return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
+    }
+};
+const MyPlugin = {}
+MyPlugin.install = function (Vue, options) {
+  // 4. 添加实例方法
+  Vue.prototype.$print = Print
+}
+export default MyPlugin