`
海上明月共潮生--风铃
  • 浏览: 59957 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

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

打印iframejs 打印打印预览 
阅读更多

1、window.print方式：

 

//jsp页面 打印按钮：     
 <input type="button" value="打印" onclick="print();">
//js 中：     
 function print(){
     window.print();
//style样式中，设置隐藏按钮打印：
<style>  
     @media   print   {  
      .noprint{display:none}  
      }  
 </style>

   打印iframe：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<body> 
<input onclick='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控件方式

WebBrowser是IE内置的浏览器控件，无需用户 下载 .

页面上加上代码

 

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

 

 js：函数中加入代码：

 

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

 

 

选择你要的功能。

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

<style type="text/css" media=print>


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


 

例如： 

function printPage()
{
    PageSetup_Null()   ;
    document.all.iframename.ExecWB(6,1);

}

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

}

 

 

                  
   //设置网页打印的页眉页脚为空    
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

 

  <body>
   firstpage  <input type="button" onclick="printPreview()" value="打印预览">
    <input type="button" onclick="printPage()" value="打印">
<br/>

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

 

 secend.html

 

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

 

//打印
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");      //设置页眉居中

 

 

 

遗留问题：1，火狐的兼容问题 火狐里 至今没实现打印预览

               2，改变注册表设置页眉页脚 毕竟不友好 希望有更好的方式

 

希望大虾们帮帮忙

 

遗留问题已解决：

1，火狐 我找了个插件 效果还挺漂亮的 我已经上传了 大家可以下载下来看看

2，没有找到别的方式 最后还是选择了修改注册表

不过document.all.Iframe.ExecWB(6,1,2);   第三个参数设为2 表示等待打印完成

   刚开始试的时候发现他并不能等待打印完成再执行我要的函数 后来发现加上setTimeout 就好使了

 

  所以我还是修改注册表 等打印完成后再将注册表改回来

//打印
  function printPage()
  {     //设置页眉页脚
        PageSetup_Null()   
              document.all.Iframe.ExecWB(6,1,2);
           //设置页眉页脚
     
  	setTimeout(" PageSetup_Default() ",200);  
   }

 采用这种方式打印完成后注册表被修改被原来的值就可以了 最然没弄明白为什么要加setTimeout() 但 真的好使 确实实现了 打印后 再把注册表修改为原来值

 

 

 

 

 

  • 大小: 113.8 KB
分享到：
| js简单地测距实现
评论
4 楼 July01 2017-09-27  

最近了解到一款StratoIO打印控件，
功能如下：1、Html友好的打印方式
2、兼容主流浏览器
3、灵活配置的任务
4、交互式打印支持
5、丰富的管理面板和接口
6、个性化服务
浏览器和系统的兼容性都很好，而且不会崩溃。参考http://webprint.stratoio.com/features
3 楼 leaderlhf 2013-05-04  
而且document.all.iframename.ExecWB这种打印的方式直接报错，根本就行不通！
2 楼 leaderlhf 2013-05-04  
这个page的附件，竟然是一个英文的网页，而且内容和上面都不对应。弄的什么啊
1 楼 lifei2199 2012-11-26  
很好的收藏
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js 打印以及预览功能实现

    然而，仅使用`window.print()`可能无法满足所有需求，比如设置页眉和页脚，或者预览打印效果。这时，我们可以借助HTML5的`&lt;iframe&gt;`元素来实现更复杂的打印功能。`&lt;iframe&gt;`可以加载一个页面或内容片段，然后在这个...

    页面实现预览和打印(页面整体打印和局部打印)

    3. 为了优化预览效果，可以使用CSS媒体查询来隐藏非打印相关的元素（如导航栏、侧边栏等），并调整页眉和页脚的样式。 局部预览和打印： 1. 对于表格，我们可以创建一个隐藏的iframe，用于加载需要打印的内容。 2. ...

    js 前端打印demo

    2. **自定义页眉和页脚**：使用CSS的`@page`规则可以设置打印时的页眉和页脚内容。 3. **分页控制**：通过CSS的`break-before`、`break-after`和`break-inside`属性，可以控制内容在打印时的分页位置。 总结来说，...

    简单的js打印控件printsetup

    4. **自定义打印设置**：JavaScript中没有直接的方法可以更改打印机设置，如纸张大小、方向等。但是，可以利用浏览器的打印对话框，通过JavaScript引导用户进行特定的设置，或者使用第三方库来模拟这些功能。 5. **...

    javaweb实现打印功能

    但是，这种方法可能无法满足复杂的打印需求，如自定义页眉页脚、分页等。这时可以考虑使用第三方库，比如`printThis.js`，它提供了更多的自定义选项，如排除某些元素、添加样式等。 3. **后端处理**：在JavaWeb中，...

    ASP.NET web打印实现

    通过@media print媒体查询，可以定义仅在打印时生效的样式规则，例如隐藏页眉、页脚，调整布局以适应纸张等。 二、ASP.NET中的Web打印方法 2.1 JavaScript实现 使用JavaScript，开发者可以调用window.print()函数...

    jQuery实现的简单网页打印功能插件printPage(通过隐藏的iframe实现).zip

    3. 设置打印样式：由于iframe中的样式与主页面是独立的，因此需要单独为打印内容设置样式，以确保打印效果与预览一致。 ```javascript var iframeDoc = $('#printIframe')[0].contentWindow.document; iframeDoc....

    Itext利用模板生成PDF实例demo，导入即可使用，供前台下载，打印，预览等

    前端预览通常使用`&lt;iframe&gt;`或者PDF.js这样的库实现，而打印则可以通过浏览器的内置打印功能或者自定义的打印指令完成。 **表格数据的处理** 在PDF中插入表格时，特别是在数据量不确定的情况下，Itext需要处理的一...

    ASP.NET 打印控件使用方法

    在实际项目中，根据具体需求，还可以扩展更多功能，如预览、设置页眉页脚、支持多页打印等。在 `PrintPage` 这个文件夹中，可能包含了示例代码或模板文件，帮助开发者更好地理解和实践 ASP.NET 打印控件的使用。记得...

    浏览器打印经验总结[参考].pdf

    //设置网页打印的页眉页脚为空try{var RegWsh = new ActiveXObject("WScript.Shell"); //设置页眉为空hkey_key="header" ; RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"" ); //设置页脚为空hkey_key="footer"; ...

    js 实现套打功能

    在Web应用中，使用JavaScript（简称js）实现套打功能可以提供灵活的前端解决方案，允许用户在浏览器中预览和控制打印内容。本文将详细讲解如何利用JavaScript实现这一功能。 首先，我们需要理解JavaScript是如何与...

    web打印控件

    每个样例可能包含不同的打印场景和配置，比如设置打印范围、页边距、纸张大小、多页合并打印、自定义页眉页脚、甚至PDF或图片的打印等。通过查看这些样例代码，开发者可以学习如何调用Lodop的API函数来实现特定的...

    Lodop WEB插件

    2. **引入Lodop服务**：在网页中，开发者需要通过JavaScript引入Lodop服务，这通常涉及设置IFrame和调用特定的JS函数。 3. **配置打印参数**：利用Lodop提供的API设置打印参数，如打印机选择、打印范围、页面设置等...

    网页打印

    当调用浏览器的打印功能时，浏览器会渲染当前页面的可视内容，并提供预览和设置选项，如页边距、纸张大小等。然而，直接使用浏览器默认的打印功能可能会导致格式丢失或不符合预期，因此，开发者通常需要自定义打印...

    js页面文本段落打印代码

    "js页面文本段落打印代码"是针对这种需求的一种简单实现，它允许用户通过点击按钮或者执行特定的js函数，将页面上的文本内容发送到打印机或者生成预览，以便进行打印操作。 首先，我们要理解JavaScript在打印方面的...

    jquery局部打印

    4. **自定义设置**：`jquery.PrintArea.js`还提供了自定义选项，例如是否包含页眉和页脚，是否打印背景颜色等。例如，你可以这样使用： ```javascript $("#myPrintArea").printArea({ mode: "popup", // 可以是...

    ASP.NET表格控件打印插件

    2. **格式化数据**：根据需要，插件可能会对数据进行格式调整，比如添加页眉和页脚，设置字体和颜色，以适应打印需求。 3. **生成HTML**：将格式化后的数据转化为适合打印的HTML页面，这可以是隐藏的IFrame或者一个...

    JS实现快递单打印功能【推荐】

    1. **window.print()**：这是最基础的打印方法，调用这个函数会立即弹出系统的打印对话框，允许用户选择打印机和打印设置。这种方法简单易用，适用于大多数现代浏览器。 2. **HTML `&lt;object&gt;` 或 `&lt;iframe&gt;` 引入...

    jQuery实现区域打印功能代码详解

    对于使用Internet Explorer浏览器的用户，如果在打印页面时出现了页眉页脚，可以尝试以下方法来移除它们： 在浏览器中，选择“文件”-&gt;“页面设置”，在弹出的设置窗口中，清空页眉和页脚的输入框。 以上就是使用...

Magicbox
Global site tag (gtag.js) - Google Analytics