打印指定DIV

window.print打印指定div

window.print可以打印网页,但有时候我们只希望打印特定控件或内容,怎么办呢?

首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印。

<html>
<head>
<script language="javascript">
function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
<title>div print</title>
</head>

<body>
//HTML Page
//Other content you wouldn't like to print
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">

<div id="div_print">

<h1 style="Color:Red">The Div content which you want to print</h1>

</div>
//Other content you wouldn't like to print
//Other content you wouldn't like to print
</body>

</html>

### 实现打印指定 `div` 区域的 HTML 代码 在网页开发中,有时需要实现仅打印页面中某个特定区域的功能,而不是整个页面内容。这种需求常见于报表、发票、订单等场景。实现该功能的核心思路是将指定区域的内容提取出来,并写入一个新的窗口中,然后调用该窗口的打印功能。 具体实现步骤如下: - 使用 `window.open()` 创建一个新的浏览器窗口。 - 使用 `document.write()` 将目标 `div` 的内容写入新窗口的文档流中。 - 调用 `window.print()` 打印新窗口的内容。 - 最后使用 `window.close()` 关闭新窗口(通常在打印完成后执行)。 以下是一个完整的 HTML 示例代码: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>打印指定区域</title> <style> #printArea { width: 80%; margin: 20px auto; padding: 20px; border: 1px solid #ccc; } .print-button { display: block; margin: 20px auto; padding: 10px 20px; font-size: 16px; cursor: pointer; } </style> </head> <body> <div id="printArea"> <h2>要打印的内容区域</h2> <p>这段文字将被打印,而页面其他内容不会被包含。</p> </div> <button class="print-button" onclick="printDiv()">打印指定区域</button> <script> function printDiv() { const content = document.getElementById('printArea').innerHTML; const printWindow = window.open('', '_blank'); printWindow.document.open(); printWindow.document.write(` <html> <head> <title>打印指定区域</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } </style> </head> <body> ${content} </body> </html> `); printWindow.document.close(); printWindow.print(); } </script> </body> </html> ``` 此代码通过 JavaScript 提取了 `id="printArea"` 的 `div` 内容,并将其写入一个新的窗口中,随后调用打印功能[^1]。 --- ### 自定义打印样式 为了确保打印内容的格式与预期一致,可以在新窗口中嵌入打印样式表或内联样式。例如,在 `document.write()` 中添加样式部分,可以控制字体、边距、颜色等,以适应打印需求[^2]。 --- ### 注意事项 - **跨域限制**:如果页面中包含图片或外部资源,需确保新窗口能够正确加载这些资源。 - **兼容性**:不同浏览器对 `window.print()` 的支持略有差异,建议在主流浏览器中测试。 - **性能优化**:如果内容较多,可考虑延迟执行打印操作,以确保内容完全加载后再调用 `window.print()`。 --- ### 相关问题 1. 如何在打印时不显示页面中的按钮和导航栏? 2. 如何在打印指定区域时添加自定义页眉页脚? 3. 如何在 Vue 或 React 框架中实现打印指定区域? 4. 打印指定区域时如何保留原有的样式? 5. 使用 `window.print()` 打印时如何控制页面边距?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值