js一键批量打印_web页面的单页打印以及批量打印实现方法
时间: 2023-08-28 17:08:03 浏览: 150
实现方法如下:
1. 单页打印
HTML 代码:
```html
<div id="print-content">
<h1>打印内容</h1>
<p>这是需要打印的内容。</p>
</div>
<button onclick="printContent()">打印</button>
```
JavaScript 代码:
```javascript
function printContent() {
var content = document.getElementById("print-content").innerHTML;
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>打印内容</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(content);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
}
```
2. 批量打印
HTML 代码:
```html
<div class="print-container">
<div class="print-item">
<h1>打印内容1</h1>
<p>这是需要打印的内容。</p>
</div>
<div class="print-item">
<h1>打印内容2</h1>
<p>这是需要打印的内容。</p>
</div>
<div class="print-item">
<h1>打印内容3</h1>
<p>这是需要打印的内容。</p>
</div>
</div>
<button onclick="printAll()">打印</button>
```
JavaScript 代码:
```javascript
function printAll() {
var printContainer = document.getElementsByClassName('print-container')[0];
var printItems = printContainer.getElementsByClassName('print-item');
for (var i = 0; i < printItems.length; i++) {
var content = printItems[i].innerHTML;
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>打印内容</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(content);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
}
}
```
以上代码实现了在页面中批量打印多个内容块。每个内容块需要有一个带有 `print-item` 类名的父元素包裹,然后通过 `getElementsByClassName` 获取到所有需要打印的内容块,循环遍历进行打印。
阅读全文