VUE调取打印机

业务需要添加调用打印机方法

原生方法： window.print()
现封装如下：
一 引入JS文件

// 打印类属性、方法定义
const Print = function (dom, options) {
      if (!(this instanceof Print))
            return new Print(dom, options);
      this.options = this.extend({
            noPrint: ".no-print"
      }, options);
      if (dom instanceof 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");
                                    }
                              }
                        }
                  }
            } return this.dom.outerHTML;
      },
      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);
            }
      },
      isDOM: HTMLElement instanceof Object ? function (obj) {
            return obj instanceof HTMLElement;
      } : function (obj) {
            return (
                  obj && obj instanceof Object && obj.nodeType === 1 &&
                  obj.nodeName instanceof String);
      }
};
const MyPlugin = {};
MyPlugin.install = function (Vue, options) {
      Vue.prototype.$print = Print;
};
export default MyPlugin;

二 在main.js中进行 全局注册

import Print from ".print"
Vue.use(Print)

因为已经挂在到VUE原型链上，所以在组件中可以直接进行使用
（说明：在需要打印的地方添加ref,不需要打印的地方添加 no-print 的class 类名，通过 $print 去调用需要打印的ref（或者用定义id然后调用id节点的方式也可以，vue中推荐用ref））

<div class="wrapper">
    <button @click="$print($refs.print)">打印</button>
    <button @click="handleClick">JS调用打印</button>
    <div ref="print">
      <h1>这是打印区域</h1>
      <small style="color:red">字体颜色备注</small>
      <p class="no-print">这是不用打印区域</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'demo',
  methods: {
    // JS 操作调用
    handleClick() {
      this.$print(this.$refs.print)
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  padding: 2rem;
  background: #ffffff;
  margin: 1rem;
}
</style>

本页面没有页码，不涉及多页打印