指定window.print 打印区域

本文介绍三种网页打印技巧:一是使用CSS隐藏不需打印的内容;二是指定打印特定区域;三是创建新窗口打印选定内容,并提供示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第一种方法:指定不打印区域
使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内。
细如下:

?
1
2
3
<style media= print type= "text/css" >
.noprint{ visibility : hidden }
</style>

要打印的内容。哈哈!

?
1
2
< p class = "noprint" >将不打印的代码放在这里。</ p >
< a href = "javascript:window.print()" rel = "external nofollow" target = "_self" >打印</ a >

第二种方法:指定打印区域
把要打印的内容放入一个 span或div,然后通过一个函数打印。

?
1
2
3
4
5
6
7
8
9
10
<span id= 'div1' >把要打印的内容放这里</span>
<p>所有内容</p>
<div id= "div2" >div2的内容</div>
<a href= "javascript:printme()" rel= "external nofollow" target= "_self" >打印</a>
<script language= "javascript" >
function printme()
{ document.body.innerHTML=document.getElementByIdx_x_x( 'div1' ).innerHTML+ '<br/>' +document.getElementByIdx_x_x( 'div2' ).innerHTML;
window.print();
}
</script>

如果要打印的只是整个页面中的一小部分,就最好采用第二种方法。

第三种方法:如果要打印的页面排版和原web页面相差很大,采用此种方法。点打印按钮弹出新窗口,把需要打印的内容显示到新窗口中,在新窗口中调用window.print()方法,然后自动关闭新窗口。
window.print可以打印网页,但有时候我们只希望打印特定控件或内容,怎么办呢?

首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
< html >
< head >
< script language = "javascript" >
function printdiv(printpage)
{
var headstr = "< html >< head >< title ></ title ></ head >< body >";
var footstr = "</ body >";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</ script >
< title >div print</ title >
</ head >
 
< body >
//HTML Page
//Other content you wouldn't like to print
< input name = "b_print" type = "button" class = "ipt" onClick = "printdiv('div_print');" value = " Print " >
 
< div id = "div_print" >
 
< h1 style = "Color:Red" >The Div content which you want to print</ h1 >
 
</ div >
//Other content you wouldn't like to print
//Other content you wouldn't like to print
</ body >
</ html >
在浏览器控制台中,如果你想打印页面的特定区域,可以利用JavaScript来实现这个功能。通常,我们会创建一个新的`HTMLCanvasElement`元素,并将需要打印的部分绘制到canvas上,然后再通过`window.print()`函数来打印canvas的内容。下面是一个简单的步骤说明: 1. 首先,获取你需要打印的DOM元素,比如一个div或者其他元素,可以用`document.getElementById()`、`.querySelector()`等方法选取。 ```javascript const targetArea = document.getElementById('your-target-area'); ``` 2. 创建一个新的canvas元素并设置其宽度和高度等于目标区域的实际尺寸。 ```javascript const canvas = document.createElement('canvas'); canvas.width = targetArea.offsetWidth; canvas.height = targetArea.offsetHeight; ``` 3. 将目标区域的内容绘入canvas。这里需要用到`toDataURL()`方法转换为data URL,然后通过`drawImage()`方法画到canvas上。 ```javascript const ctx = canvas.getContext('2d'); ctx.drawImage(targetArea, 0, 0, canvas.width, canvas.height); ``` 4. 最后,调用`window.print()`,传入之前转换好的canvas的data URL作为print的范围。 ```javascript window.print(canvas.toDataURL()); ``` 注意:虽然上述步骤可以在某些场景下工作,但在生产环境中,直接使用`window.print()`可能会遇到一些限制,因为它不是专门设计用于程序控制的。对于更复杂的布局或CSS渲染,可能需要借助第三方库或者服务来实现精确的区域打印
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值