window.print() 打印 具体代码
时间: 2023-09-02 21:10:01 浏览: 172
以下是使用window.print()函数进行打印的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Print Example</title>
<style>
@media print {
/* 设置打印区域的样式 */
body {
font-size: 14px;
}
.print-header {
display: none;
}
}
</style>
</head>
<body>
<div class="print-header">
<!-- 打印页眉 -->
<h1>Print Example</h1>
</div>
<div class="print-content">
<!-- 打印内容 -->
<p>Hello, world!</p>
</div>
<button onclick="window.print()">Print</button>
</body>
</html>
```
在上面的示例中,我们首先定义了一个@media print{}媒体查询来设置打印区域的样式。然后在页面中添加了一个打印页眉和打印内容,并且设置了一个打印按钮。当用户点击打印按钮时,会触发window.print()函数来打印页面内容。在打印预览中,我们可以看到打印区域的样式已经被设置了。
相关问题
window.print()局部打印代码实现
局部打印可以通过CSS的@media打印样式来实现,具体代码如下:
HTML:
```html
<div id="print-area">
<h1>Print Area</h1>
<p>This is the area to be printed.</p>
</div>
<button id="print-button">Print</button>
```
CSS:
```css
@media print {
body * {
visibility: hidden;
}
#print-area, #print-area * {
visibility: visible;
}
#print-area {
position: absolute;
left: 0;
top: 0;
}
}
```
JavaScript:
```javascript
var printButton = document.getElementById("print-button");
var printArea = document.getElementById("print-area");
printButton.addEventListener("click", function() {
window.print();
});
```
以上代码会将整个页面隐藏,只显示id为"print-area"的部分,并且该部分会被放置在页面的左上角,然后通过JavaScript代码实现点击按钮进行打印。
window.print()局部打印
在使用 JavaScript 进行打印操作时,可以使用 `window.print()` 方法来触发浏览器的打印功能。而如果想要局部打印某个 HTML 元素,可以通过以下步骤实现:
1. 获取需要打印的元素,可以通过 `document.querySelector()` 或 `document.getElementById()` 等方法来获取。
2. 创建一个新的空白窗口,可以使用 `window.open()` 方法来创建。
3. 在新窗口中插入需要打印的元素。
4. 调用新窗口的 `window.print()` 方法来触发打印功能。
以下是一个简单的示例代码:
```html
<!-- 点击按钮触发打印功能 -->
<button onclick="printContent()">Print Content</button>
<!-- 要打印的元素 -->
<div id="printableContent">
<h1>Printable Content</h1>
<p>This is the content that will be printed.</p>
</div>
<script>
function printContent() {
// 获取要打印的元素
var content = document.getElementById("printableContent");
// 创建新窗口
var printWindow = window.open("", "PrintWindow");
// 在新窗口中插入要打印的元素
printWindow.document.write(content.outerHTML);
// 调用新窗口的打印功能
printWindow.print();
}
</script>
```