JavaScript实现Web页面打印技巧

"js打印Web页面的方法，包括指定不打印区域和指定打印区域的JS实现" 在Web开发中，有时候我们需要提供一个功能，让用户能够直接从浏览器打印网页中的特定内容。JavaScript（简称js）提供了这样的能力，可以方便地控制打印的行为。以下是两种常见的js打印Web页面的方法： ### 第一种方法：指定不打印区域 这种方法通过CSS来实现，主要思路是创建一个`noprint`的CSS类，然后将不想在打印版中显示的内容放入这个类中。当打印时，这些内容会被隐藏。 ```html <style media="print" type="text/css"> .noprint { visibility: hidden } </style> <!-- 打印内容 --> <p>要打印的内容。哈哈！</p> <!-- 不打印内容 --> <p class="noprint">将不打印的代码放在这里。</p> <a href="javascript:window.print()" target="_self">打印</a> ``` 在这个例子中，当点击“打印”链接时，浏览器会打开打印对话框，但是`.noprint`类中的内容在打印预览中是不可见的。 ### 第二种方法：指定打印区域 这种方法更灵活，可以直接选择页面上的某个元素进行打印。我们可以通过设置一个按钮，点击后调用JavaScript函数来实现。 ```html <!-- 打印按钮 --> <input type="button" id="button_print" name="button_print" value="打印本单据" onclick="javascript:printit('div1')"> <!-- 要打印的区域 --> <span id="div1">把要打印的内容放这里</span> <!-- 其他内容 --> <p>所有内容</p> <!-- 另一个打印按钮，用于打印不同的区域 --> <input type="button" id="button_print" name="button_print" value="打印本单据" onclick="javascript:printit('div2')"> <!-- 另一个可打印的区域 --> <div id="div2">div2的内容</div> ``` 下面是一个简单的JavaScript函数`printit`，它接受一个ID作为参数，然后将对应ID的元素内容提取出来，替换整个页面的内容，再触发打印。 ```javascript // 提示窗口 function printit(MyDiv) { if (confirm('确定打印吗？')) { // 使用getElementById获取元素内容，注意此处的_x是错误的，应去掉 var newstr = document.getElementById(MyDiv).innerHTML; var oldstr = document.body.innerHTML; document.body.innerHTML = newstr; window.print(); } } ``` 这个函数首先会弹出一个确认对话框询问用户是否确定要打印。如果用户点击“确定”，则会获取指定ID的元素内容，替换当前页面的内容，然后调用`window.print()`启动打印操作。 这两种方法可以根据实际需求灵活应用。第一种方法适合于大部分页面内容都需要打印，但有少量内容不需要的情况；而第二种方法则适用于需要打印特定部分，或者多个独立打印区域的场景。