这个代码工具类是师兄发给我的，我也不知道哪来的，自己修补了一下，收藏备用。

    1. // 打印类属性、方法定义
    2. const Print = function (dom, options) {
    3.   if (!(this instanceof Print)) return new Print(dom, options);
    5.   this.options = this.extend({
    6.     'noPrint': '.no-print'
    7.   }, options);
    9.   if ((typeof dom) === "string") {
    10.     this.dom = document.querySelector(dom);
    11.   } else {
    12.     this.isDOM(dom)
    13.     this.dom = this.isDOM(dom) ? dom : dom.$el;
    14.   }
    16.   this.init();
    17. };
    18. Print.prototype = {
    19.   init: function () {
    20.     var content = this.getStyle() + this.getHtml();
    21.     this.writeIframe(content);
    22.   },
    23.   extend: function (obj, obj2) {
    24.     for (var k in obj2) {
    25.       obj[k] = obj2[k];
    26.     }
    27.     return obj;
    28.   },
    30.   getStyle: function () {
    31.     var str = "",
    32.         styles = document.querySelectorAll('style,link');
    33.     for (var i = 0; i < styles.length; i++) {
    34.       str += styles[i].outerHTML;
    35.     }
    36.     str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
    38.     return str;
    39.   },
    41.   getHtml: function () {
    42.     var inputs = document.querySelectorAll('input');
    43.     var textareas = document.querySelectorAll('textarea');
    44.     var selects = document.querySelectorAll('select');
    46.     for (var k = 0; k < inputs.length; k++) {
    47.       if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
    48.         if (inputs[k].checked == true) {
    49.           inputs[k].setAttribute('checked', "checked")
    50.         } else {
    51.           inputs[k].removeAttribute('checked')
    52.         }
    53.       } else if (inputs[k].type == "text") {
    54.         inputs[k].setAttribute('value', inputs[k].value)
    55.       } else {
    56.         inputs[k].setAttribute('value', inputs[k].value)
    57.       }
    58.     }
    60.     for (var k2 = 0; k2 < textareas.length; k2++) {
    61.       if (textareas[k2].type == 'textarea') {
    62.         textareas[k2].innerHTML = textareas[k2].value
    63.       }
    64.     }
    66.     for (var k3 = 0; k3 < selects.length; k3++) {
    67.       if (selects[k3].type == 'select-one') {
    68.         var child = selects[k3].children;
    69.         for (var i in child) {
    70.           if (child[i].tagName == 'OPTION') {
    71.             if (child[i].selected == true) {
    72.               child[i].setAttribute('selected', "selected")
    73.             } else {
    74.               child[i].removeAttribute('selected')
    75.             }
    76.           }
    77.         }
    78.       }
    79.     }
    81.     return this.dom.outerHTML;
    82.   },
    84.   writeIframe: function (content) {
    85.     var w, doc, iframe = document.createElement('iframe'),
    86.         f = document.body.appendChild(iframe);
    87.     iframe.id = "myIframe";
    88.     //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
    89.     iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
    90.     w = f.contentWindow || f.contentDocument;
    91.     doc = f.contentDocument || f.contentWindow.document;
    92.     doc.open();
    93.     doc.write(content);
    94.     doc.close();
    95.     var _this = this
    96.     iframe.onload = function(){
    97.       _this.toPrint(w);
    98.       setTimeout(function () {
    99.         document.body.removeChild(iframe)
    100.       }, 100)
    101.     }
    102.   },
    104.   toPrint: function (frameWindow) {
    105.     try {
    106.       setTimeout(function () {
    107.         frameWindow.focus();
    108.         try {
    109.           if (!frameWindow.document.execCommand('print', false, null)) {
    110.             frameWindow.print();
    111.           }
    112.         } catch (e) {
    113.           frameWindow.print();
    114.         }
    115.         frameWindow.close();
    116.       }, 10);
    117.     } catch (err) {
    118.       console.log('err', err);
    119.     }
    120.   },
    121.   isDOM: (typeof HTMLElement === 'object') ?
    122.       function (obj) {
    123.         return obj instanceof HTMLElement;
    124.       } :
    125.       function (obj) {
    126.         return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
    127.       }
    128. };
    129. export default MyPlugin

    如何使用

    以 原生 为例：

    1. <div ref="printPage">xxxxx</div>
    2. <button onclick="printPage()">打印</button>
    1. import print from "/src/utils/print";
    2. printPage() {
    3.   print(document.getElementById("printPage"))
    4. },

    以 Vue 为例：

    1. <div ref="printPage">xxxxx</div>
    2. <el-button @click="printPage">打印</el-button>
    1. import print from "@/utils/print";
    2. printPage() {
    3.     print(this.$refs.printPage)
    4. },

    from "@/utils/print" “@”在这里是/src目录
    this.$refs.xxx 填写的是页面绑定的属性值，这里是 ref="printPage"