指定window.print 打印区域

最新推荐文章于 2024-05-08 14:12:05 发布

踏实_进取

最新推荐文章于 2024-05-08 14:12:05 发布

阅读量4k

点赞数 1

分类专栏： SQL

SQL 专栏收录该内容

11 篇文章

订阅专栏

本文介绍三种网页打印技巧：一是使用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，然后通过一个函数打印。

 
         <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中，然后用下面的代码进行打印。

 
         <
         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
         >