JavaScript – 页面打印

简介

打印是网页浏览器提供的极其实用的功能之一，有时候我们需要在网页中提供一个打印按钮，让用户打印当前页面或是页面某一部分的内容。JavaScript为我们提供了函数window.print()，它和标准的打印功能没有什么区别，用户可以通过选择打印机、设置打印格式等功能来进行打印。

print()函数的使用

基本使用

print()函数是window对象的一个方法，调用它就可以开始打印操作。使用print()函数的默认的打印行为是打印当前页面，但也可以通过将自定义的CSS样式表赋值给＠media print媒体查询中来指定打印内容。

示例代码：

<!DOCTYPE html>
<html>
<body>
   <button onclick="window.print()">Click here to Print This Page</button>
</body>
</html>

上面的代码中，当用户点击“Click here to Print This Page”按钮时，将触发浏览器页面打印功能。

自定义样式

除了默认的打印行为外，我们可以通过自定义打印CSS样式来实现定制化的打印功能。在媒体查询@media print中，我们可以使用CSS定义打印中的样式，例如：

@media print {
    body {
        font-size: 12pt;
    }
    h1 {
        font-size: 18pt;
    }
}

在上面的例子中，我们通过样式定义了打印时全局字体大小以及H1标签的字体大小。

除样式之外，我们还可以使用JavaScript动态地向打印页面添加内容，或是在打印结束后执行一些额外的操作。下面我们来看一个实例：

<!DOCTYPE html>
<html>
<body>

<h1>My Printable Page</h1>
<p>Click the button below to generate a printable document with some random text:</p>
<button onclick="printPage()">Print This Page</button>

<script>
function printPage() {
    // Create a new window object
    var w = window.open();
    // Write a new document into the new window
    w.document.write('<html><head><title>Printable Document</title>');
    // Add some stylesheet rules for printing
    w.document.write('<style>@media print {h1 {font-size: 24pt;}p {font-size: 12pt;}}</style>');
    w.document.write('</head><body>');
    // Add some random content
    w.document.write('<h1>My Random Heading</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus tellus vel tincidunt placerat. Fusce eu lorem at justo laoreet eleifend at in ligula. Maecenas sit amet dictum erat, quis pretium arcu. Donec semper turpis in libero maximus, a aliquam est tincidunt. Praesent tincidunt mattis porta.</p>');
    w.document.write('</body></html>');
    // Print the new document
    w.print();
    // Close the new window
    w.close();
}
</script>

</body>
</html>

在上面的代码中，我们通过JavaScript创建了一个新窗口，并向该窗口写入了自定义的HTML内容和样式表，然后通过window.print()直接打印该新的HTML页面。最后，我们关闭了打印窗口。

自定义打印操作

在打印结束后，我们可以执行一些自定义操作。通常这些自定义操作用于重置页面状态，例如将表单数据重置为初始状态、隐藏某些元素、或是进行一些预处理等。

<!DOCTYPE html>
<html>
<body>

<button onclick="printPage()">Print This Page</button>

<script>
function printPage() {
    // Save a reference to the form
    var form = document.forms[0];
    // Disable the form
    form.disabled = true;

    // Ensure the form data is reset before printing
    form.reset();

    // Add a custom CSS stylesheet for printing
    var styleSheet = "<style>@media print {#header, #footer {display:none;}h1 {font-size: 24pt;}p {font-size: 12pt;}}</style>";
    // Write the HTML content to the print region
    document.getElementById("printregion").innerHTML = styleSheet + document.getElementById("content").innerHTML;
    // Print the current page
    window.print();

    // Re-enable the form
    form.disabled = false;
}
</script>

<div id="content">
    <div id="header">
        <h1>My Printable Document</h1>
    </div>

    <div id="printregion">
        <h2>Printable Content Title</h2>
        <p>Some text to be printed goes here.</p>
    </div>

    <div id="footer">
        <p>Page Footer</p>
    </div>
</div>

</body>
</html>

在上面的例子中，我们首先获取了并禁用了页面中的第一个表单，然后为打印样式创建了一个自定义的CSS样式表，并将其添加到了HTML的内容区域中。最后，我们打印了内容区域，并在打印完成后恢复表单的可用状态。