仅打印 div - Javascript (1)

📌 相关文章

📜 仅打印 div - Javascript (1)

📅 最后修改于: 2023-12-03 15:36:12.376000 🧑 作者: Mango

仅打印 div - JavaScript

在某些应用程序或网页中，您可能需要仅打印特定部分的元素，而不是整个页面。这是网页设计中的一项基本技能，这种情况下您需要仅打印 div。

在 JavaScript 中，打印特定区域很简单。只需用 getElementById 函数获取与 DIV 的特定 ID 相关联的元素，即可选择它。请查看如下示例：

function printDiv(){
    var divToPrint=document.getElementById('divToPrint');
    var newWin=window.open('','Print-Window');
    newWin.document.open();
    newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
    newWin.document.close();
    setTimeout(function(){newWin.close();},10);
}

代码分析：

这个脚本主要有 3 个关键操作。

首先，我们获取 DIV 元素，用 getElementById 函数根据该 DIV ID 获取它。这是我们要打印的 DIV。

var divToPrint=document.getElementById('divToPrint');

创建新的窗口打印，打印元素。

var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();

最后，我们使用 setTimeout 函数（10毫秒，任何值都会正常工作）关闭窗口。我们需要等待窗口打印完毕。

setTimeout(function(){newWin.close();},10);

使用该代码：

要使用这个代码，请将其复制到 HTML 文档的头部。对于最佳效果，请将脚本放在和标记之间，如下所示：

<head>
<script type="text/javascript">
function printDiv(){
    // write the JavaScript code here
}
</script>
</head>

在你想要这个代码工作的地方创建一个按钮。为按钮添加事件

<input type="button" value="Print" onclick="printDiv()" />

结论：

此示例向你展示了如何使用 JavaScript 从网页中打印特定区域。这很简单，如果您理解了 getElementById 函数并知道如何使用它，则可以完成此任务。祝好运！