window.print页面怎么打印某个div内容
时间: 2024-04-29 09:23:01 浏览: 12
您可以使用JavaScript的print()函数来打印特定的div内容。
以下是一个示例代码:
```
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
```
这个函数接受一个参数,即您想要打印的div的ID。它将获取该div的内容并存储在一个变量中,然后将整个页面的内容替换为该div的内容。然后,它将调用浏览器的打印功能。一旦打印完成,它将恢复原始页面内容。
您可以在按钮或链接上调用此函数以打印特定的div内容:
```
<button onclick="printDiv('divToPrint')">Print</button>
<div id="divToPrint">
<!-- The content you want to print -->
</div>
```
相关问题
window.print()打印页面指定区域内容
可以使用CSS中的打印样式表(@media print)来指定要打印的区域。
首先,给要打印的区域添加一个ID属性。比如:
```html
<div id="print-area">
<!-- 这里是要打印的内容 -->
</div>
```
接着,在CSS样式表中添加@media print规则,指定要打印的区域和不需要打印的元素:
```css
@media print {
/* 隐藏不需要打印的元素 */
body * {
visibility: hidden;
}
/* 显示要打印的区域 */
#print-area, #print-area * {
visibility: visible;
}
}
```
这样,当用户点击打印按钮时,浏览器会根据@media print规则来渲染打印页面,只显示指定的区域内容。
最后,在JavaScript代码中调用window.print()方法即可:
```javascript
// 打印指定区域
window.print();
```
需要注意的是,由于@media print规则会影响所有页面元素的可见性,所以在打印完毕后要及时恢复页面的可见性。可以在@media print规则中添加恢复可见性的代码:
```css
@media print {
/* 隐藏不需要打印的元素 */
body * {
visibility: hidden;
}
/* 显示要打印的区域 */
#print-area, #print-area * {
visibility: visible;
}
/* 恢复可见性 */
#print-area {
position: static;
}
}
```
这样,当打印完成后,指定区域就会恢复原来的可见性。
window.print() 打印指定内容
如果需要打印页面中的指定内容,可以使用 HTML 的打印样式表(@media print)。这样可以在打印时隐藏不需要打印的内容,并且格式化需要打印的内容。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Print Example</title>
<style>
@media print {
.no-print {
display: none;
}
}
</style>
</head>
<body>
<h1 class="no-print">Print Example</h1>
<p class="no-print">This is an example of printing an HTML page using JavaScript.</p>
<div id="print-content">
<p>This is the content to be printed.</p>
</div>
<button class="no-print" onclick="printContent()">Print</button>
<script>
function printContent() {
var content = document.getElementById("print-content").innerHTML;
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>Print Content</title></head><body>');
printWindow.document.write(content);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
}
</script>
</body>
</html>
```
在上面的示例中,我们在 HTML 中定义了一个样式表(@media print),用于在打印时隐藏指定的元素(在本例中是标题和说明)。然后我们在页面中定义了一个需要打印的内容(在本例中是一个 div 元素),并且给这个 div 元素添加了一个 id(print-content)。接着我们定义了一个打印按钮,并且给按钮添加一个 onclick 事件,该事件会调用 printContent() 函数。
在 printContent() 函数中,首先获取需要打印的内容(即 print-content 元素的 innerHTML),然后创建一个新的浏览器窗口(使用 window.open() 方法)。接着我们在新窗口中写入需要打印的内容,并且调用 print() 方法进行打印。
需要注意的是,在新窗口中写入 HTML 代码时,需要在 head 标签中添加 title 标签,否则在某些浏览器中可能无法正常打印。