使用JavaScript实现网页选择性打印

"本文介绍了如何使用JavaScript实现网页打印功能，包括两种主要方法：截取内容和通过CSS控制打印样式。提供了一个实际的代码示例来演示这两种方法的应用。" 在网页开发中，有时需要为用户提供一个便捷的打印功能，以便他们可以将网页内容打印出来。JavaScript作为客户端脚本语言，可以方便地实现这一需求。以下是两种常见的JavaScript实现网页打印的方法： 1. 截取内容： 这种方法是通过查找特定的标记（如`<!--PrintSt-->`和`<!--PrintEnd-->`）来截取需要打印的内容。在`PrintDoc`函数中，首先获取整个页面的HTML内容，然后找到`PrintStart`和`PrintEnd`之间的部分，将这部分内容设置为页面的新HTML，执行打印操作，最后再恢复原始页面内容。这样可以确保只打印用户想要的部分，而忽略其他不相关的元素。 示例代码： ```javascript function PrintDoc() { var allContent = window.document.body.innerHTML; var s = allContent; var PrintSt = '<!--PrintSt-->'; var PrintEnd = '<!--PrintEnd-->'; // 截取需要打印的数据段 s = allContent.substr(0, allContent.indexOf(PrintEnd) - (allContent.indexOf(PrintSt) + PrintSt.length + 1)); // 将要打印的数据显示在页面上 window.document.body.innerHTML = s; // 执行打印 window.print(); // 恢复原来的页面 window.document.body.innerHTML = allContent; return false; } ``` 2. 利用CSS控制打印样式： 这种方法不依赖于特定的HTML标记，而是通过添加针对打印的CSS样式来隐藏不想打印的元素。在CSS中，可以定义一个媒体查询（@media print），在这个查询中，可以设置某些元素在打印时不可见。例如，可以将某个类名的元素设置为`display:none`，使其在打印时不显示。 ```css @media print { .no-print { display: none; } } ``` 然后在HTML中，将不想打印的元素添加`class="no-print"`，这样它们在打印时就会被隐藏。 ```html <div class="no-print">这是不想打印的内容</div> ``` 结合这两种方法，可以更加灵活地控制网页打印的内容和样式。在实际应用中，应根据具体需求选择合适的方式，或者结合两者，以达到最佳效果。同时，为了提高用户体验，还可以添加预览功能，让用户在打印前查看即将打印的内容。