要使一个div在不可打印的div中可打印,可以通过以下步骤实现:
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
@media print {
.no-print {
display: none;
}
}
</style>
<script>
function printDiv(divId) {
var printContents = document.getElementById(divId).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
</head>
<body>
<div id="printableDiv">
<!-- 这里是要打印的内容 -->
<h1>可打印的内容</h1>
<p>这是一段示例文本。</p>
</div>
<div class="no-print">
<!-- 这里是不需要打印的内容 -->
<button onclick="printDiv('printableDiv')">打印</button>
</div>
</body>
</html>
在上面的示例中,我们首先使用CSS的@media print媒体查询来隐藏带有class="no-print"的div,这样在打印时就不会显示该div。
然后,我们定义了一个printDiv函数,该函数接受一个div的id作为参数。函数首先获取指定div的innerHTML,然后将整个页面的innerHTML替换为要打印的内容,接着触发window.print()方法来打印页面。最后,将原始的页面内容恢复。
在页面中,我们将要打印的内容放在id为"printableDiv"的div中,并在页面的其他位置放置一个按钮,点击按钮时调用printDiv函数并传入要打印的div的id。
这样,当用户点击打印按钮时,指定的div内容将作为打印内容,并触发浏览器的打印功能。