Vue 使用 print.js 实现打印组件

谁践踏了优雅 2022-11-20 09:47 503阅读 0赞

首先：在 common 文件夹下面创建 print.js 文件 代码如下

// 打印类属性、方法定义
    /* 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')
                            }
                        }
                    }
                }
            }
    
            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 && 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

在 main.js 注册该模块

// 打印
    import print from '@/common/print'
    Vue.use(print)

创建需要打印的组件 Print.vue，在父组件引入该组件，并注册

// 引入
    import print from './Print'
    // 注册
    components:{ productionTaskListDetail,print},

父组件（也就是触发事件的组件）的基础布局

<el-button type="primary" icon="el-icon-printer" circle size="mini" plain @click="printerView(scope.row)"></el-button>
    
    
    <section ref="printer" >
        <print @changeData='changeData' :printId="printId" class="printer"></print>
    </section>

调用打印的方法

printerView(val) { 
    	this.$print(this.$refs.printer)
    },

给打印的页面添加媒体查询样式（视图隐藏组件设置此样式）

使用注意：如果组件需要父组件的值可使用以下逻辑。所需打印的组件如果有图片，打印预览时可能不会显示图片，解决办法，图片加载完成给父组件传递一个参数 printerId，这里的 printerId 也是父组件传给子组件的数据，父组件接收到 printerId ，且 printerId 不为空时执行 打印

// 给子组件传id
     printerView(val) { 
         this.printId = val.id;
     },
    // 判断子组件传过来的id，如果不为空证明子组件已经渲染结束
    changeData(data) { 
        if(!!data) { 
            this.$print(this.$refs.printer)
            this.printId = ''
        }
    }

// 图片渲染成功给父组件传递参数
    <div class="image">
                <el-image @load="function(e) { 
                  $emit('changeData',printerId)
                }" class="image-possion" style="width: 150px; height: 150px" :src="`/rebar/base/downQr/?key=SCRUD&id=${ headerData.id}`"></el-image>
            </div>