在vue开发中,我们会遇到很多关于打印的需求,我将比较常用的方法记录一下。
我使用的方法是在页面设置一个节点,获取该节点,通过给该节点追加样式来实现打印。
html页面元素
<div id="review-print-box" v-show="false"> 需要打印的内容 </div>
v-show="false" 确保该节点不会在页面中显示
js实现打印
setPrint() { var html = document.getElementById("review-print-box").innerHTML; var w = window.open(location.href); var style = w.document.createElement("style"); style.type = "text/css"; style.innerText = ` 打印内容元素的样式... `; w.document.getElementsByTagName("head").item(0).appendChild(style); w.document.body.innerHTML = html; w.document.close(); w.print(); w.close(); }
打印会在新的窗口实现打印