1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | // 打印类属性、方法定义 /* 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 |
2.在main.js引用使用问题;
3.在点击预览
PrintRow() {
this.$print(this.$refs.print) // this.$refs.print 这个是打印模块最大容器设置的ref的值
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp