正常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>
能够看到当使用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>
然后就能在打印模式和下载的pdf中隐藏掉一些不必要的信息了
指定需要打印的元素
能够在打印模式隐藏元素,那就能指定打印的元素,需要隐藏的元素比较多的话还是建议指定需要打印的元素,我的方法时通过更改页面内容来改变需要打印的元素,建议是把需要打印的内容直接装到一个<div>里,设置好div样式之后再进行打印。
<script>
function printpage(){
document.body.innerHTML=document.getElementById("list").innerHTML; /* 改变页面内容 */
window.print();
location.reload(); /* 重新载入文档,复原页面内容 */
}
</script>