JavaScript中window.print()打印

       JavaScript中使用window.print()打印方法时,打印的是当前页的所有内容,所以如果直接在当前页使用此打印方法应先保存当前页面再把打印部分替换当前页面执行完之后再替换回来;或者新打开一个页面,把所打印的部分都写到新打开的页面上。

方式1:在当前页面打印

1、var newStr = document.getElementById(printDiv).innerHTML;//获取打印的部分
2、var bodyStr = document.body.innerHtml;//获取当前页所有内容
3、 document.body.innerHTML = newStr; //打印部分写到当前页
4、  window.print(); //执行打印功能
5、 document.body.innerHTML = bodyStr; // 打印执行完之后把之前页面内容写到页面

方式2:新建浏览器对话框打印

1、var newStr = document.getElementById("printDiv").innerHTML;//获取打印部分
2、var win = window.open("","新建打印窗口","height=300,width=700,top=100");//新建窗口
3、win.document.body.innerHTML = newStr;//打印内容写到新建窗口中
4、 win.print();//执行打印

方式3:新建浏览器对话框中通过url获取内容

var url = "http://....";
1、var wind = window.open(url,"新建打印窗口","height=300,width=700");
2、 wind.print();

 

### 使用 `window.print()` 实现网页打印 `window.print()` 是浏览器内置的方法,用于启动打印机对话框并允许用户选择要使用的打印机以及设置打印选项。当此方法被调用时,默认情况下会尝试打印整个文档的内容。 #### 打印当前页面所有内容 最简单的方式是在需要触发打印的地方直接调用该函数: ```javascript document.getElementById('printButton').addEventListener('click', function(){ window.print(); }); ``` 这种方式适用于希望打印整个页面的情况[^1]。 #### 局部内容打印 然而,在很多应用场景下只想要打印特定部分而非整页内容。为了达到这个目的,可以采用多种策略之一:创建一个新的窗口或 iframe 来装载待打印的数据;或者利用 CSS 控制哪些元素应该出现在打印版本中。这里介绍一种较为简便的做法——借助自定义标签来界定打印范围,并配合 JavaScript 动态调整 DOM 结构以便于打印。 HTML 中可以通过添加特殊的注释标记 `<--startprint-->` 和 `<--endprint-->` 来圈定目标区域[^3]: ```html <!--startprint--> <div id="contentToPrint"> <!-- 需要打印的内容 --> </div> <!--endprint--> <button onclick="handlePrint()">点击打印</button> ``` 接着编写相应的处理逻辑以确保只有这部分会被发送给打印机: ```javascript function handlePrint() { var contents = document.querySelector('#contentToPrint').innerHTML; var frame1 = document.createElement('iframe'); frame1.name = "frame1"; frame1.style.position = "absolute"; frame1.style.top = "-10000px"; document.body.appendChild(frame1); var frameDoc = frame1.contentWindow ? frame1.contentWindow : (frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument); frameDoc.document.open(); frameDoc.document.write('<html><head><title>DIV Contents</title>'); frameDoc.document.write('</head><body>'); frameDoc.document.write(contents); frameDoc.document.write('</body></html>'); frameDoc.document.close(); setTimeout(function () { window.frames["frame1"].focus(); window.frames["frame1"].print(); document.body.removeChild(frame1); }, 500); } ``` 这段脚本首先获取到指定 ID 的 div 内容,然后在一个隐藏的 iframe 中构建新的 HTML 文档并将这些内容写入其中,最后对该 iframe 调用 print 函数完成实际的打印操作[^2]。 对于更复杂的需求比如 Vue.js 组件中的表格分页显示但在打印时不考虑分页而是呈现完整的数据集,则可以在检测到进入打印模式时修改组件的状态从而加载更多条目[^4]。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值