vue implements printing function (can print multiple pages)

When we use the vue-print-nb” plug-in, we find that we can only print one page, which is very uncomfortable. Now we have encapsulated a tool class that can print multiple pages, which is simple and convenient. Not much to say, Go directly to the code.

Introduce the tool class first

1. Create the print.js file in the src/utils folder

2. Copy the following code directly into

//Print class attributes and method definitions
/* 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>";
        str + = "<style>html,body,div{height: auto!important;font-size:14px}</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: (typeof HTMLElement === 'object') ?
        function (obj) {<!-- -->
            return obj instanceof HTMLElement;
        } :
        function (obj) {<!-- -->
            return obj & amp; & amp; typeof obj === 'object' & amp; & amp; obj.nodeType === 1 & amp; & amp; typeof obj.nodeName === 'string';
        }
};
const MyPlugin = {<!-- -->}
MyPlugin.install = function (Vue, options) {<!-- -->
    // 4. Add instance method
    Vue.prototype.$print = Print
}
export default MyPlugin

3. Introduce the code into the entry file main.js of the vue project

import Print from '@/utils/print.js'
Vue.use(Print) // print

vue page code

1. Use div in the code block to set the page content that needs to be printed. Pay attention to keywords

<Button type="primary" @click="handlePrint">Print</Button>
<div ref="print">
<!-- Page content -->
<div>...Table, print content...</div>
<!-- Do not print -->
<div class="no-print">...Do not print content...</div>
</div>

2. In the implementation method

// print
handlePrint() {<!-- -->
  this.$print(this.$refs.print);
}

3. After clicking the print button, this page will pop up. When the printer is connected, you can print.

At this point, our function has been implemented. Isn’t it super simple? Print.js has been encapsulated. If necessary, you can adjust the content of print.js appropriately.
It’s a long road ahead, let’s work hard together! ! !