HTML 调用打印机打印指定区域

原创已于 2022-02-24 16:06:35 修改 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

于 2022-02-24 16:05:19 首次发布

这段代码演示了一个网页中如何实现特定区域的内容打印，并在打印过程中隐藏非打印内容。通过设置CSS可见性，使得只有`printArea`部分在打印时可见，同时提供全屏打印按钮。点击‘打印’按钮调用`printArea`函数，该函数隐藏整个页面内容并显示打印区域，然后调用`window.print()`进行打印操作。

直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>打印页面</title>
</head>
<body>
<h1>这是不打印部分</h1>
<div class="print" style="text-align:center; margin-top: 30px">
    <div id="printArea">
        <div>......文本打印区域......</div>
        <div>......文本打印区域......</div>
        <div>......文本打印区域......</div>
        <div>......文本打印区域......</div>
        <div>......文本打印区域......</div>
    </div>
    <br>
    <br>
    <input type="button" media="print" value="打印" onclick="printArea()">
    <input id="btnPrintFull" type="button" value="全屏打印">
</div>
</body>
	<script>
	function printArea(){
		//设置body隐藏，并设置打印区域为可见
		document.body.style.visibility='hidden';
		document.getElementById('printArea').style.visibility='visible';
		window.print();
		location.href='打印测试.html'
		return false;
	}</script>
</html>