js iframe 打印 打印预览 页眉页脚的设置

最新推荐文章于 2024-06-20 18:03:29 发布
最新推荐文章于 2024-06-20 18:03:29 发布
阅读量3.1k 收藏
点赞数
分类专栏： 随笔分享 文章标签： javascript 打印

1、window.print方式：

 

Html代码 //jsp页面 打印按钮：
 
        
  1.  <input type="button" value="打印" onclick="print();">  
  2. //js 中：        
  3.  function print(){   
  4.      window.print();   
  5. //style样式中，设置隐藏按钮打印：   
  6. <style>     
  7.      @media   print   {     
  8.       .noprint{display:none}     
  9.       }     
  10.  </style>  
//jsp页面 打印按钮：     
 <input type="button" value="打印" οnclick="print();">
//js 中：     
 function print(){
     window.print();
//style样式中，设置隐藏按钮打印：
<style>  
     @media   print   {  
      .noprint{display:none}  
      }  
 </style>

   打印iframe：

 
  1. <html xmlns="http://www.w3.org/1999/xhtml" >  
  2. <head>  
  3. <title>标题页</title>  
  4. <body>    
  5. <input onclick='prn()' type=button value=print_Iframe><br>    
  6. <iframe id=myframe src="http://www.baidu.com"></iframe>    
  7. <script>    
  8. function prn()    
  9. {    
  10. var win=window.open("about:blank")       //打开一个空页面   
  11. win.moveTo(100,100)                      //移动到指定位置   
  12. win.location=document.all.myframe.src    //指定页面的内容   
  13. win.print()                              //打印页面   
  14. }    
  15. </script>    
  16. </body>    
  17. </html>  
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<body> 
<input οnclick='prn()' type=button value=print_Iframe><br> 
<iframe id=myframe src="http://www.baidu.com"></iframe> 
<script> 
function prn() 
{ 
var win=window.open("about:blank")       //打开一个空页面
win.moveTo(100,100)                      //移动到指定位置
win.location=document.all.myframe.src    //指定页面的内容
win.print()                              //打印页面
} 
</script> 
</body> 
</html>

 

2,WebBrowser控件方式

页面上加上代码

 

Html代码
  1. <object ID="WebBrowser" name="WebBrowser" WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>  
<object ID="WebBrowser" name="WebBrowser" WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>

 

 js：函数中加入代码：

 

Js代码
  1. WebBrowser.ExecWB(6,1);   
  2. //打印设置   
  3. WebBrowser.ExecWB(8,1);   
  4. //打印预览   
  5. WebBrowser.ExecWB(7,1);   
  6. 关于这个组件还有其他的用法，列举如下：   
  7. WebBrowser.ExecWB(1,1) 打开   
  8. WebBrowser.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口   
  9. WebBrowser.ExecWB(4,1) 保存网页   
  10. WebBrowser.ExecWB(6,1) 打印   
  11. WebBrowser.ExecWB(7,1) 打印预览   
  12. WebBrowser.ExecWB(8,1) 打印页面设置   
  13. WebBrowser.ExecWB(10,1) 查看页面属性   
  14. WebBrowser.ExecWB(15,1) 好像是撤销，有待确认   
  15. WebBrowser.ExecWB(17,1) 全选   
  16. WebBrowser.ExecWB(22,1) 刷新   
  17. WebBrowser.ExecWB(45,1) 关闭窗体无提示  
WebBrowser.ExecWB(6,1);
//打印设置
WebBrowser.ExecWB(8,1);
//打印预览
WebBrowser.ExecWB(7,1);
关于这个组件还有其他的用法，列举如下：
WebBrowser.ExecWB(1,1) 打开
WebBrowser.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口
WebBrowser.ExecWB(4,1) 保存网页
WebBrowser.ExecWB(6,1) 打印
WebBrowser.ExecWB(7,1) 打印预览
WebBrowser.ExecWB(8,1) 打印页面设置
WebBrowser.ExecWB(10,1) 查看页面属性
WebBrowser.ExecWB(15,1) 好像是撤销，有待确认
WebBrowser.ExecWB(17,1) 全选
WebBrowser.ExecWB(22,1) 刷新
WebBrowser.ExecWB(45,1) 关闭窗体无提示

   这种方式打印iframe：

              window.parent.document.i1.window.WebBrowser.ExecWB(6, 1);

 

 

选择你要的功能。

但是打印是会把整个页面都打印出来的,页面里面有什么东西就打印出来,我们有时候只需要打印数据表格,这时我们就要写一个样式了:把不想打印的部份隐藏起来：
样式内容：

Html代码
  1. <SPAN style="BACKGROUND-COLOR: #ffffff; WHITE-SPACE: normal"><style type="text/css" media=print></SPAN>  
<style type="text/css" media=print>
Html代码
  1. .noprint...{display : none }   
  2. </style>  
.noprint...{display : none }
</style>

 

3，打印iframe 中的内容：

   主要语句：document.all.iframename.ExecWB(6,1); 便可以只打印iframe中的页面。

                  document.all.iframename.ExecWB(7,1); 打印预览 

                    …………

使用这种方式打印不需要加：<object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>


 

例如：

Js代码
  1. function printPage()   
  2. {   
  3.     PageSetup_Null()   ;   
  4.     document.all.iframename.ExecWB(6,1);   
  5.   
  6. }   
  7.   
  8. //打印预览    
  9. function printPreview()   
  10. {          
  11.         
  12.   document.all.iframename.ExecWB(7,1);    
  13.   
  14. }      
function printPage()
{
    PageSetup_Null()   ;
    document.all.iframename.ExecWB(6,1);

}

//打印预览 
function printPreview()
{       
	 
  document.all.iframename.ExecWB(7,1); 

}

 

 

Js代码
  1.    
                  
Js代码
  1.    //设置网页打印的页眉页脚为空       
  2. function PageSetup_Null()      
  3. {      
  4.    try{       
  5.        var Wsh=new ActiveXObject("WScript.Shell");       
  6.        Wsh.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\header","");  //通过修改注册表的方式 页眉和页脚也可以改成你想要的内容   
  7.        Wsh.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\footer","");      
  8.    }catch(e){   
  9.        alert(e.name+e.message);   
  10.    }       
  11. }   
   //设置网页打印的页眉页脚为空    
function PageSetup_Null()   
{   
   try{    
       var Wsh=new ActiveXObject("WScript.Shell");    
       Wsh.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\header","");  //通过修改注册表的方式 页眉和页脚也可以改成你想要的内容
       Wsh.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\footer","");   
   }catch(e){
	   alert(e.name+e.message);
   }    
}

 

 

 

 

 通过：document.all.iframe.***的方式打印 不仅可以只打印本页面中的iframe 还可以多层嵌套找到要打印的iframe

  例如：

first.html

 

Html代码
  1.  <body>  
  2.   firstpage  <input type="button" onclick="printPreview()" value="打印预览">  
  3.    <input type="button" onclick="printPage()" value="打印">  
  4. lt;br/>  
  5.   
  6. <iframe name="iframe" width="500"style="height:400" src="secend.html"></iframe>  
  7.  </body>  
  <body>
   firstpage  <input type="button" οnclick="printPreview()" value="打印预览">
    <input type="button" οnclick="printPage()" value="打印">
<br/>

 <iframe name="iframe" width="500"style="height:400" src="secend.html"></iframe>
  </body>

 

 secend.html

 

Html代码
  1. <body style="background-color:#888">  
  2.    secendpage     
  3.    <br/>  
  4.     
  5.    <br/>  
  6.       <iframe name="i1" src="third.html"></iframe>  
  7.       <iframe name="i2" src="thirdd.html"></iframe>  
  8.     <br>  
  9.  </body>  
 <body style="background-color:#888">
    secendpage  
    <br/>
  
    <br/>
       <iframe name="i1" src="third.html"></iframe>
       <iframe name="i2" src="thirdd.html"></iframe>
     <br>
  </body>

 

 

third.html:  随意吧

js:

 

Js代码
  1. //打印   
  2. function printPage()   
  3. {       //页眉页脚空……  这里没写了   
  4.       iframe.document.all.i1.ExecWB(6, 1); "   
  5.          
  6.         
  7. }   
  8.   
  9. //打印预览    
  10. function printPreview()   
  11. {    
  12.           
  13.       iframe.document.all.i1.ExecWB(7, 1);    
  14.      
  15. }  
//打印
function printPage()
{       //页眉页脚空……  这里没写了
	  iframe.document.all.i1.ExecWB(6, 1); "
	  
	 
}

//打印预览 
function printPreview()
{ 
 	   
	  iframe.document.all.i1.ExecWB(7, 1); 
  
}

  于是 以此类推： 就可以实现任意的iframe嵌套打印和打印预览问题了

  例如从子页面找父页面打印也可：window.parent.document.all.i1.ExecWB(6, 1);

 

符号 含义
&w   网页标题
&u   网页地址 (URL)
&d   短日期格式（由“控制面板”中的“区域设置”指定）
&D   长日期格式（由“控制面板”中的“区域设置”指定）
&t   由 “控制面板”中的“区域设置”指定的时间格式
&T   24 小时时间格式
&p   当前页码
&P   总页数
&b   文本右对齐（请把要右对齐的文字放在“&b”之后）
&b&b 文字居中（请把要居中的文字放在“&b”和“&b” 之间）
&&     单个 & 号 (&)

       Wsh.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\header","&b页眉&b");      //设置页眉居中

 

pengjianhuan88
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html js 打印编辑页眉,js 设置网页打印的页眉页脚和页边距
weixin_39599372的博客
06-18 1350
var HKEY_Root,HKEY_Path,HKEY_Key;HKEY_Root="HKEY_CURRENT_USER";HKEY_Path="//Software//Microsoft//Internet Explorer//PageSetup/";var head,foot,top,bottom,left,right;//取得页面打印设置的原参数数据function PageSetup_t...
嵌套iframe页面做打印去掉页眉页脚
阿毛的博客
01-18 3561
iframe.contentWindow.print()打印局部页面时，去掉页眉页尾 &amp;amp;amp;amp;amp;amp;lt;style media=&amp;amp;amp;amp;amp;quot;print&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt; @page { size: auto; /* auto is the initial value */
web前端知识——iframe标签、CSS
xiaotangyu7dong的博客
05-19 2712
一、iframe标签 用于在一个网页里面打开另一个网页 <iframe src="https://www.taobao.com" frameborder="0" width="500" height="600"></iframe> src :指定显示的网页地址 width 宽度 height 高度 scrolling 是否显示滚动条 yes\no frameborder 是否显示边框 1\0 显示某宝网站 和a标签一起运用，在页面窗口内打开其他网页 <a href
前端iframe标签实现打印功能，自定义内容和样式
最新发布
qq_55777517的博客
06-20 197
原生js实现打印
打印iframe 内容的预览设置
Kc
08-15 5508
我们一般蒋 iframe 高度,宽度 设置为0  目地是不显示在界面中(我们现在这种做法就需要这样) 但一般打印 都是只打印可显示的内容 sysmsgid_ifrm.htm (iframe页面 需嵌入主页中) 消息查看 .noprint{di
使用window.print打印frame框架，可以设置页眉页脚
Jaylinlxf的博客
09-16 1431
&lt;script&gt; var hkey_root,hkey_path,hkey_key hkey_root="HKEY_CURRENT_USER" hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\" //设置网页打印的页眉页脚为空 function pagesetup_null(){ try{ var RegW...
js 打印以及预览功能实现
03-27
然而，仅使用`window.print()`可能无法满足所有需求，比如设置页眉和页脚，或者预览打印效果。这时，我们可以借助HTML5的`<iframe>`元素来实现更复杂的打印功能。`<iframe>`可以加载一个页面或内容片段，然后在这个...
js页面文本段落打印代码
07-24
"js页面文本段落打印代码"是针对这种需求的一种简单实现，它允许用户通过点击按钮或者执行特定的js函数，将页面上的文本内容发送到打印机或者生成预览，以便进行打印操作。 首先，我们要理解JavaScript在打印方面的...
js 前端打印demo
10-27
2. **自定义页眉和页脚**：使用CSS的`@page`规则可以设置打印时的页眉和页脚内容。 3. **分页控制**：通过CSS的`break-before`、`break-after`和`break-inside`属性，可以控制内容在打印时的分页位置。 总结来说，...
Itext利用模板生成PDF实例demo，导入即可使用，供前台下载，打印，预览等
03-29
前端预览通常使用`<iframe>`或者PDF.js这样的库实现，而打印则可以通过浏览器的内置打印功能或者自定义的打印指令完成。 **表格数据的处理** 在PDF中插入表格时，特别是在数据量不确定的情况下，Itext需要处理的一...
可去除页眉页脚及选择打印部分
10-28
可去除页眉页脚及选择打印部分，火狐浏览器不支持此功能。
js调用iframe实现打印页面内容的方法
12-12
1、程序说明1) 此程序可以实现选择页面中的区域进行打印，以iframe方式进行打印；2) 与原生态的print() 区别在于，取消打印页面后可以完整保留当前访问页面的内容。2、代码部分 1) JS 函数： 代码如下:function do_print(id_str)//id-str 打印区域的id{var el = document.getElementById(id_str);var iframe = document.createElement(‘IFRAME’);var doc = null;iframe.setAttribute(‘style’, ‘position:absolut
使用js实现打印分页的功能（包括页码，表头，表尾）
07-13
使用js实现打印分页的功能（包括页码，表头，表尾）
使用Iframe打印预览pdf，兼容谷歌火狐浏览器
qq_40567849的博客
01-05 3538
- 点击页面的打印按钮，可以调用浏览器的打印功能，并预览打印pdf文件。 - 解决火狐浏览器出现about:blank问题。
JavaScript实现网页打印，可设置页眉、页脚、页边距
tiwsonchen的博客
03-17 3263
WebBrowser是IE内置的浏览器控件，无需用户下载,即可实现客户端页面打印。 关于这个组件还有其他的用法，列举如下： [code="java"]WebBrowser.ExecWB(1,1) 打开 Web.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口 Web.ExecWB(4,1) 保存网页 Web.ExecWB(6,1) 打印 Web.ExecW...
嵌套在iframe页面打印去掉页眉页尾
酸酸的博客
08-21 963
通过iframe打印局部页面时，去掉页眉页尾： //确认打印 printOk() { const el = document.getElementById('printDiv'); const iframe = document.createElement('IFRAME'); let doc = null; iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;to
javascript打印设置页眉页脚
Bourne_2015的博客
06-16 635
<script language="JavaScript"> var hkey_root,hkey_path,hkey_key hkey_root="HKEY_CURRENT_USER" hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\" //设置网页打印的页眉页脚为空 functi...
【iframe结合pdf.js实现pdf的预览/下载及打印功能】
AmyGeng123的博客
08-31 5337
iframe结合pdf.js实现pdf的预览/下载及打印
JS iframe打印预览界面 监听点击了打印和取消
05-27
可以通过以下步骤来监听打印和取消按钮的点击： 1. 获取iframe元素和其中的文档对象： ```javascript var iframe = document.getElementById("myIframe"); var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; ``` 2. 给iframe文档对象中的打印按钮绑定点击事件： ```javascript var printBtn = iframeDoc.getElementById("printBtn"); printBtn.addEventListener("click", function() { // 打印按钮被点击时的逻辑 }); ``` 3. 给iframe文档对象中的取消按钮绑定点击事件： ```javascript var cancelBtn = iframeDoc.getElementById("cancelBtn"); cancelBtn.addEventListener("click", function() { // 取消按钮被点击时的逻辑 }); ``` 这样就可以监听iframe中打印和取消按钮的点击事件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值