vue打印之window.print( )打印方法详解

2024-06-12 15:41| 来源: 网络整理| 查看: 265

winodw.print()方法

print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.querySelector(‘print’) 也可以达到同样的效果。默认打印页面中body里的所有内容。

最简单的使用，直接window.print()就可以，当然，document.execCommand(‘print’) 也可以达到同样的效果。

代码示例：

// 这里我们是对局部打印做的演示 // 首先获取局部html，也就是打印的区域 const printHTML = document.querySelector('#printId').innerHTML; // 将打印的区域赋值，进行打印 window.document.body.innerHTML = printHTML; window.print(); // 调用window打印方法 window.location.reload(); // 打印完成后重新加载页面事件监听

有两个事件可以监听到到打印事件，一个是beforeprint,一个是afterprint，分别表示打印事件触发前后。这个事件在 IE6 就已经支持了，兼容大概是 Firefox、IE全支持, Chrome63+支持, Safari暂不支持

我们可在处理事件onbeforeprint() 将一些不需要打印的元素隐藏，和打印后的处理事件 onafterprint()放开隐藏的元素

页眉打印默认有页眉页脚信息，展现到页面外边距范围，我们可以通过去除页面模型page的外边距，使得内容不会延伸到页面的边缘，再通过设置 body 元素的 margin 来保证 A4 纸打印出来的页面带有外边距

@media print { @page { margin: 0; } body { margin: 1cm; } }

注意：如果打印整个网页，会打印document下所有可见元素，包括

里面的背景不会被打印，包括背景色啊背景图片等如果图片是懒加载的，需要额外处理，不然打印直接空白

注：如上方法，可实现打印，但是由于局部打印window.document.body.innerHTML = printHTML; window.location.reload(); // 打印完成后重新加载页面所以会导致我们整个页面被覆盖。如果你的项目中使用了vuex，重新加载页面会使你的状态管理丢失。

window.open(); 新窗口打印

我们其实还可以使用新窗口打印，将要打印的HTML，赋值给新窗口的body，打印之后我们再将之关闭。

这里我们window.open(URL,name,specs,replace)；暂不多做介绍

// 获取局部html，也就是打印的区域 const printHTML = document.querySelector('#printId').innerHTML; // 将打印的区域赋值给新窗口body，进行打印 const newWindow = window.open('',''); newWindow.document.write(printHTML); newWindow.window.print(); newWindow.window.close(); // 打印完成后关闭后新窗口

———————————————— 原文链接：https://blog.csdn.net/weixin_52400118/article/details/114383705

【本文地址】

公司简介

联系我们