关于window.print()打印,隐藏页眉页脚信息和特定元素的打印和隐藏

1,757 阅读1分钟

正常window.print()打印的情况

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打印测试</title>
<script>
function printpage(){
    window.print();
}
</script>
</head>
<body>

<input class="button" type="button" value="打印" onclick="printpage()" />
<div id="list">需要打印的内容</div>

</body>
</html>

000.jpg

111.jpg

能够看到当使用window.print()的时候,是默认打印整个页面的内容,而且在页眉和页脚的区域也是有网页的title和时间以及域名信息的,要打印成自己想要的文档,就需要隐藏不必要的信息,或者只打印自己需要的信息。

打印时隐藏指定元素

直接使用window.print()打印会包括当前页面的元素和页眉页脚的信息,想要在打印模式中隐藏掉信息和自己不想在文档中出现的元素,就需要<style>media属性切换成print的打印模式的样式。

<style  media="print">  /* 页面打印模式的样式 */
#list{
    display: none;  /* 在打印模式中隐藏#list元素 */
}
.button{
    display: none;  /* 在打印模式中隐藏.button元素 */
}
@page {
    size: auto;
    margin: 0mm;
}  /* 隐藏打印模式中的页眉页脚信息 */
</style>

222.jpg

然后就能在打印模式和下载的pdf中隐藏掉一些不必要的信息了

指定需要打印的元素

能够在打印模式隐藏元素,那就能指定打印的元素,需要隐藏的元素比较多的话还是建议指定需要打印的元素,我的方法时通过更改页面内容来改变需要打印的元素,建议是把需要打印的内容直接装到一个<div>里,设置好div样式之后再进行打印。

<script>
function printpage(){
	document.body.innerHTML=document.getElementById("list").innerHTML; /* 改变页面内容 */
	window.print();
	location.reload(); /* 重新载入文档,复原页面内容 */
}
</script>

333.jpg