您想打印网页的一部分吗？
网页中是否有多个打印按钮，用于打印页面的一部分？
您想在页面打印中排除某些元素吗？ （如图片、广告）
您想以不同的方式打印显示页吗？ （更改文本的字体或颜色）
在这里，我将针对上述问题给出代码示例
让我们看一个 HTML 网页示例
<html>
<body>
<div id="header">Header Content</div>
<div id="content">actual content</div>
<div id="footer">Footer content</div>
<input type="button" value="Print" onclick="printPage();"></input>
</body>
</html>
如果你想打印整页然后
<script language="javascript">
function printPage() {
window.print();
}
</script>
打印网页的一部分：
– 创建一个打印窗口并写入您想要打印的html文本
– 聚焦窗口并调用“print()”函数
– 关闭打印窗口
这是修改后的 printPage 函数
<input type="button" value="Print" onclick="printPage('content');"></input>
function printPage(id) {
var html="<html>";
html+= document.getElementById(id).innerHTML;
html+="</html>";
var printWin = window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
您可以通过添加样式元素或隐藏实际内容中的某些元素
在打印窗口 html 中包含 css 文件
<div id="content">
<div class="ads"> Ad content</div>
actual content
<img src="example.gif" />
</div>
----
function printPage(id) {
var html="<html>";
html+="<head>";
html+="<style type='text/css'>#content div.ads, #content img {display:none} </style>";
html+="<link rel='Stylesheet' type='text/css' href='css/print.css' media='print' />";
html+="</head>";
html+= document.getElementById(id).innerHTML;
html+="</html>";
.....
}
在上面的示例中，我添加了样式和 css 文件，您可以使用其中之一或两者都使用。使用
这些样式或 css，我们可以设置仅用于打印的文本样式。
如果您有多个打印按钮，并且每个按钮都打印网页的选定区域，那么您
需要在每次单击按钮时传递打印区域的 ID。
<div id="area1">Area1 content</div>
<input type="button" value="Print" onclick="printPage('area1');"></input>
<div id="area2">Area2 content</div>
<input type="button" value="Print" onclick="printPage('area2');"></input>
只需根据您的要求更改字段即可
