JS实现WEB页面打印及预览的三个方法

js打印WEB页面与打印预览 在WEB开发中，打印WEB页面是非常常见的需求。特别是在需要生成报告、发票、证书等文档时，打印功能是必不可少的。本文将介绍三种常用的js打印WEB页面方法，并对每种方法进行详细的讲解。 **第一种方法：指定不打印区域** 在这个方法中，我们使用CSS来定义一个`.noprint`的class，将不打印的内容放入这个class内。在HTML中，我们可以使用 `<p class="noprint">将不打印的代码放在这里。</p>` 来标记不打印的内容。然后，在CSS中，我们可以使用 `.noprint{visibility:hidden}` 来隐藏这些内容。在点击打印按钮时，我们可以使用 `<a href="javascript:window.print()" target="_self">打印</a>` 来调用浏览器的打印功能。 这种方法非常简单易用，但它有一个缺点，那就是需要手动标记不打印的内容，并且需要在CSS中定义隐藏规则。如果我们需要打印的内容很多，这个方法可能不太实用。 **第二种方法：指定打印区域** 在这个方法中，我们可以使用JavaScript来指定打印区域。我们可以将要打印的内容放入一个 `<span id='div1'>把要打印的内容放这里</span>` 中，然后使用JavaScript函数来打印这些内容。在点击打印按钮时，我们可以使用 `<a href="javascript:printme()" target="_self">打印</a>` 来调用JavaScript函数。在函数中，我们可以使用 `document.body.innerHTML=document.getElementById('div1').innerHTML+'<br/>'+document.getElementById('div2').innerHTML;` 来组合要打印的内容，然后使用 `window.print()` 来调用浏览器的打印功能。 这种方法非常灵活，可以根据需要自由地组合要打印的内容。但是，它需要编写JavaScript代码来实现打印功能，这可能需要一些开发经验。 **第三种方法：使用新窗口打印** 在这个方法中，我们可以使用JavaScript来弹出一个新窗口，然后在新窗口中显示要打印的内容。在新窗口中，我们可以使用 `window.print()` 来调用浏览器的打印功能，然后自动关闭新窗口。 这种方法非常适合需要打印的页面排版和原WEB页面相差很大的情况。例如，如果我们需要打印一个表单，但表单的排版和原WEB页面不同，这种方法可以非常方便地实现打印功能。 **控制打印设置** 在打印时，我们可能需要控制打印的设置，例如纸张大小、打印方向、页边距等。在JavaScript中，我们可以使用 `factory.printing` 对象来控制打印设置。例如，我们可以使用 `factory.printing.SetMarginMeasure(2)` 来设置页边距为2英寸。我们也可以使用 `factory.SetPageRange(false,1,3)` 来设置打印的页码范围。 js打印WEB页面有多种方法，每种方法都有其优缺点。根据需要，我们可以选择合适的方法来实现打印功能。