jQuery 使用jQuery打印div内容

在本文中，我们将介绍如何使用jQuery来打印一个div的内容。

1. 创建一个带有内容的div

首先，我们需要创建一个带有内容的div元素。我们可以通过以下代码来创建一个简单的div元素，并在其中插入一些文本：

<div id="myDiv">
    这是一个要打印的div内容。
</div>

2. 添加打印按钮

为了打印div的内容，我们可以在页面上添加一个打印按钮。当用户点击这个按钮时，我们将获取div的内容并进行打印。我们可以使用以下代码来添加一个按钮：

<button id="printBtn">打印</button>

3. 使用jQuery打印div内容

现在，我们需要使用jQuery来获取div的内容并进行打印。我们可以通过以下代码来实现这一功能：

$("#printBtn").click(function(){
    var divContent = $("#myDiv").html();
    var printWindow = window.open('', '', 'width=600,height=600');
    printWindow.document.write('<html><head><title>打印</title></head><body>');
    printWindow.document.write(divContent);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
});

在上面的代码中，我们首先获取div的内容，并将其赋值给变量divContent。然后，我们打开一个新的空白窗口，并将div的内容写入该窗口中。接着，我们关闭窗口并调用print()方法来触发打印操作。

4. 示例

以下是一个完整的示例，演示了如何使用jQuery打印一个div的内容：

<!DOCTYPE html>
<html>
<head>
    <title>打印div内容</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
         $(document).ready(function(){$ ("#printBtn").click(function(){
                var divContent = $("#myDiv").html();
                var printWindow = window.open('', '', 'width=600,height=600');
                printWindow.document.write('<html><head><title>打印</title></head><body>');
                printWindow.document.write(divContent);
                printWindow.document.write('</body></html>');
                printWindow.document.close();
                printWindow.print();
            });
        });
    </script>
</head>
<body>
    <div id="myDiv">
        这是一个要打印的div内容。
    </div>
    <button id="printBtn">打印</button>
</body>
</html>

在上面的示例中，当用户点击”打印”按钮时，将执行JavaScript代码，从而实现打印div内容的功能。