打印不显示打印按钮及获取其他属性

最新推荐文章于 2022-08-31 11:07:20 发布
最新推荐文章于 2022-08-31 11:07:20 发布
阅读量442 收藏
点赞数
分类专栏： JSP 文章标签： CSS JavaScript XHTML HTML 制造 ViewUI

今天弄了下打印相关的的内容，主要是为了打印页面内容的时候不想同时打印出“打印按钮”。

主要有五种方法（其中6为删除打印页眉页脚的例子）：

 

1、打印前将style隐藏，打印后再显示出来。该方法较简单，且可以写成一个共有的方法，推荐。

 

style.display="none";
window.print();//打印
style.display="";

 

 

    下面的代码写成了一个传入标签中name属性作为参数的方法，可以讲name均为此名称的部分隐藏打印：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>打印部分内容</title>


<SCRIPT language=javascript>

function printWebPageByHideName(hideName) //打印函数
{
	if(!document.getElementsByName(hideName)){
		alert("打印失败");
		return;
	} 
	
	var hideNum =  document.getElementsByName(hideName).length;
	//alert(hideNum);
	for( i = 0;i<hideNum; i++){
		document.getElementsByName(hideName)[i].style.display="none";//打印时隐藏
	}
	window.print();//打印
	for( i = 0;i<hideNum; i++){
		document.getElementsByName(hideName)[i].style.display="";//打印后再显示出来
	}
	
}



</SCRIPT>
</head>

<body>
<DIV align=center>

你希望打印的内容..........
</DIV>

<input  type="button" name="btn" value="提交1"  οnclick="printWebPageByHideName('btn');"/>

<input  type="button" name="btn" value="提交2"  οnclick="printNew();"/>

<input  type="button" name="btn" value="提交3"  οnclick="printNew();"/>
</body>
</html>
 

 

 

 

2.css：主要是把不想打印出的内容用如下样式：

 

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

或者：

<style  media="print" type="text/css">
.noprint{DISPLAY: none;}
</style>
 

 

 

 

整个页面如下，还包含一些常用的打印属性功能按钮：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>打印</title>

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

<style type="text/css">
<!--
.STYLE1 {
	font-size: 16px;
	font-weight: bold;
}
-->
</style>
</head>

<body>

     <OBJECT id="WebBrowser" height="0" width="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"
       VIEWASTEXT>
</OBJECT>
	  
	  
	  <center >
	    <p class="STYLE1">要打印的内容
        <span class="noprint">&nbsp;</span></p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <table width="100%" border="0">
          <tr>
            <td><span class="noprint">
              <input name="button2" type="button" οnclick="document.all.WebBrowser.ExecWB(6,1)" value="打印" />
            </span></td>
            <td><span class="noprint">
              <input name="button3" type="button" οnclick="document.all.WebBrowser.ExecWB(6,6)" value="直接打印" />
            </span></td>
            <td><span class="noprint">
              <input name="button4" type="button" οnclick="document.all.WebBrowser.ExecWB(8,1)" value="页面设置" />
            </span></td>
            <td><span class="noprint">
              <input name="button5" type="button" οnclick="document.all.WebBrowser.ExecWB(7,1)" value="打印预览" />
            </span></td>
          </tr>
          <tr>
            <td><span class="noprint">
              <input name="button6" type="button" οnclick="javascript:window.close()" value="关闭js" />
            </span></td>
            <td><span class="noprint">
              <input name="button7" type="button" οnclick="document.all.WebBrowser.ExecWB(2,1)" value="关闭 " />
            </span></td>
            <td><span class="noprint">
              <input name="button8" type="button" οnclick="document.all.WebBrowser.ExecWB(4,1)" value="保存网页 " />
            </span></td>
            <td><span class="noprint">
              <input name="button9" type="button" οnclick="document.all.WebBrowser.ExecWB(10,1)" value="查看页面属性 " />
            </span></td>
          </tr>
          <tr>
            <td><span class="noprint">
              <input name="button" type="button" οnclick="document.all.WebBrowser.ExecWB(1,1)" value="打开 " />
            </span></td>
            <td><span class="noprint">
              <input name="button11" type="button" οnclick="document.all.WebBrowser.ExecWB(17,1)" value="全选" />
            </span></td>
            <td><span class="noprint">
              <input name="button12" type="button" οnclick="document.all.WebBrowser.ExecWB(22,1)" value="刷新 " />
            </span></td>
            <td><span class="noprint">
              <input name="button13" type="button" οnclick="document.all.WebBrowser.ExecWB(45,1)" value="关闭窗体无提示" />
            </span></td>
          </tr>
          <tr>
            <td><span class="noprint">
              <input name="button10" type="button" οnclick="document.all.WebBrowser.ExecWB(15,1)" value="好像是撤销，有待确认" />
            </span></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>
	    <p>&nbsp;            </p>
	  </center>


</body>
</html>

 

3、打印页面中选取的连续部分的js

 

<script language=javascript>   
function doPrint() {   
bdhtml=window.document.body.innerHTML;   
sprnstr="<!--startprint-->";   
eprnstr="<!--endprint-->";   
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);   
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));   
window.document.body.innerHTML=prnhtml;   
window.print();   
}   
</script>
 
  打印页面中选取的连续部分（打印从“--startprint--”到“--endprint--”）的HTML代码：
  <!--startprint-->需打印部分：
  <table id="table1" width="90%" border="0" align="center" cellpadding="0" cellspacing="0"> 
  
    <tr> 
      <td>1</td> 
      <td>2008-5-20</td> 
      <td>天祺教育</td> 
      <td>购物网站</td> 
      <td>2级</td> 
      <td>老师</td> 
      <td>王老师</td> 
      <td>2008-7-20</td> 
      <td><a href="aqChakanShow.html">查看</a></td> 
    </tr> 
    </table> 
	<!--endprint-->

	非打印部分：
  <table width="90%" align="center" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
      <td><a href="javascript:;" onClick="doPrint()">打印</a> </td> 
      <td></td> 
    </tr> 
  </table>
 

 

 

 

4、frame框架，不想贴代码了，代码在附件中

 

5、div样式，可下载附件中的printDiv.rar文件

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>打印测试</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function PrintPage() { 
	if (window.print) 
	{
	// *****************************************************
	// divPrint即为你在打印的区域
	// 这里根据你要打印的哪些内容，从原显示页面中用
	// <div id="divPrint">divPrint....</div>
	// 等标示出来,要打印多少项目就标示多少
	// ***************************************************** 
	var divPrint = document.all.divPrint.innerHTML;
	
	// *****************************************************
	// 定义打印用的CSS，具体你想打印出什么样的格式全看你自己
	// 了，但要注意：如果此处有什么同网页中不一致的，可能打印
	// 出来的页面同网页格式、字体可能会有所不同
	// *****************************************************
	var css = '<style type="text/css" media=all>' +
	'p { line-height: 120%}' +
	'.ftitle { line-height: 120%; font-size: 18px; color: #000000}' +
	'td { font-size: 10px; color: #000000}' +
	'</style>' ;
	
	// ******************************************************
	// 在此处重新设置的打印格式，根据你的打印要求，将原显示的
	// 网页的DIV内容重新组合，可以根据你原来的表格内容，去掉
	// 不要打印的，你也可以能下面定义的noprint忽略掉你不想打
	// 印的东西，只调用你要打印的内容，但这样被忽略掉的地方将
	// 打印出空，不是很美观。表格宽度要同打印的纸张宽度匹配。
	// ******************************************************
	var body ='<table width="640" border="0" cellspacing="0" cellpadding="5">' +
	' <tr> ' +
	' <td class="fbody"> ' +
	' <div align="center" class=ftitle>' + divPrint + '</div>' +
	' </td>' +
	' </tr>' +
	'</table>';
	
	// ******************************************************
	// 重设document.body，打印文档准备就绪
	// ******************************************************
	document.body.innerHTML = '<center>' + css + body + '</center>';
	
	// ******************************************************
	// 调用打印命令，打印当前窗口内容。当你打印时其实是一张新
	// 的网页了，但网页文件还是原先的。紧接着调用
	// window.history.go(0)，再回到打印前的页面，效果相当不差
	// ******************************************************
	window.print();
	window.history.go(0);
	
	}
}
-->


</script>


<style>
@media print {
.noprint {display:none}
}
</style>
<!--//.noprint 定义了noprint，在以下不需要打印的地方加入 class="noprint"后，用window.print()打印就会忽略--> 

</head>

<body>
<p align="center">&nbsp;非打印部分！！</p>

<p><div id="divPrint">divPrint...需要打印的内容！！！.
<p>&nbsp;</p>
本人严正声明：此帖在全世界只有一个沙发。本人是该沙发的唯一合法代表。自古以来本人一直对该沙发行使着主权。沙发两边的扶手是沙发不可分割的一部分，任何企图想制造两个沙发，或一个沙发一个扶手的行为，都必将遭到包括中国网民在内的全世界网民的反对！各族网民反对沙发分裂、维护沙发统一、维护沙发稳定的决心是坚定不移的，任何破坏沙发稳定、制造沙发分裂的图谋都是不得人心的，是注定要失败的！
</div></p>

<p>
  <center>
    <a οnclick="PrintPage() "
	style="text-decoration: underline; cursor: hand;">[ 打&nbsp;印 ]</a>
  </center>
</p>

<p>&nbsp;</p>
<p>打开“页面设置”对话框</p>
<p align="center"><img src="http://www.ljjyw.com/datas/wen/print_htm.files/guide7.jpg" width="393" height="382" longdesc="http://www.ljjyw.com/datas/wen/print_htm.files/guide7.jpg" /></p>
<p>&nbsp;</p>
<p align="left"></p>
<table align="center" border="1" width="80%">
  <tbody>
    <tr>
      <th>符号</th>
      <th>含义</th>
    </tr>
    <tr>
      <td>&amp;w</td>
      <td>网页标题</td>
    </tr>
    <tr>
      <td>&amp;u</td>
      <td>网页地址 (URL)</td>
    </tr>
    <tr>
      <td>&amp;d</td>
      <td>短日期格式（由“控制面板”中的“区域设置”指定）</td>
    </tr>
    <tr>
      <td>&amp;D</td>
      <td>长日期格式（由“控制面板”中的“区域设置”指定）</td>
    </tr>
    <tr>
      <td>&amp;t</td>
      <td>由“控制面板”中的“区域设置”指定的时间格式</td>
    </tr>
    <tr>
      <td>&amp;T</td>
      <td>24 小时时间格式</td>
    </tr>
    <tr>
      <td>&amp;p</td>
      <td>当前页码</td>
    </tr>
    <tr>
      <td>&amp;P</td>
      <td>总页数</td>
    </tr>
    <tr>
      <td>&amp;b</td>
      <td>文本右对齐（请把要右对齐的文字放在“&amp;b”之后）</td>
    </tr>
    <tr>
      <td>&amp;b&amp;b</td>
      <td>文字居中（请把要居中的文字放在“&amp;b”和“&amp;b” 之间）</td>
    </tr>
    <tr>
      <td>&amp;&amp;</td>
      <td>单个 &amp; 号 (&amp;)</td>
    </tr>
  </tbody>
</table>
</p>
<p>	注：1、这些符号可以与文字组合使用，如本教程中的“页码，&amp;p/&amp;P”。<br />
	2、页眉和页脚默认是左对齐的，所以IE只提供了右对齐和居中的设置符号。<br />
	3、推荐给大家一种设置方法：页眉为空，页脚设为“&amp;b第         &amp;p 页 / 共 &amp;P 页&amp;b”，打印效果为在页脚居中显示“第 1 页 / 共 4 页”的效果。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<br/> 


</p> 

<p></p>
<p>&nbsp;</p>
</body>
</html>

 

 

 

 

6、网上搜的，未细看，但可以去除页眉和页脚，可下载可去除页眉页脚及选择打印部分.rar 

<HTML><HEAD><TITLE>web打印去掉页眉页脚，以及不想打印出的页面元素</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=javascript>
function printpr() //预览函数
{
document.all("qingkongyema").click();//打印之前去掉页眉，页脚
document.all("dayinDiv").style.display="none"; //打印之前先隐藏不想打印输出的元素（此例中隐藏“打印”和“打印预览”两个按钮）
var OLECMDID = 7;
var PROMPT = 1;
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(OLECMDID, PROMPT);
WebBrowser1.outerHTML = "";
document.all("dayinDiv").style.display="";//打印之后将该元素显示出来（显示出“打印”和“打印预览”两个按钮，方便别人下次打印）
}

function printTure() //打印函数
{
document.all('qingkongyema').click();//同上
document.all("dayinDiv").style.display="none";//同上
window.print();
document.all("dayinDiv").style.display="";
}
function doPage()
{
layLoading.style.display = "none";//同上
}



</SCRIPT>



<script language="VBScript">
dim hkey_root,hkey_path,hkey_key
hkey_root="HKEY_CURRENT_USER"
hkey_path="\Software\Microsoft\Internet Explorer\PageSetup"
'//设置网页打印的页眉页脚为空
function pagesetup_null()
on error resume next
Set RegWsh = CreateObject("WScript.Shell")
hkey_key="\header"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,""
hkey_key="\footer"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,""
end function
'//设置网页打印的页眉页脚为默认值
function pagesetup_default()
on error resume next
Set RegWsh = CreateObject("WScript.Shell")
hkey_key="\header"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&w&b页码，&p/&P"
hkey_key="\footer"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&u&b&d"
end function
</script>



</HEAD>
<BODY background="images/background_01.gif" leftMargin=0
topMargin=0 rightMargin=0 bottomMargin=0 style="BACKGROUND-POSITION: center 50%">



<DIV align=center>

你希望打印的内容..........
</DIV>



<DIV align="center" id="dayinDiv" name="dayinDiv"><input type="button" class="tab" value="打印" οnclick="printTure();">  
<input   type="button" class="tab" value="打印预览" οnclick="printpr();">
<input type="hidden" name="qingkongyema" id="qingkongyema" class="tab" value="清空页码" οnclick="pagesetup_null()">  
<input type="hidden" class="tab" value="恢复页码" οnclick="pagesetup_default()">
</DIV>



</BODY>
</HTML>
 

另外有个实用的js应用大全：

 

http://blog.csdn.net/panxuan/archive/2007/11/26/1902826.aspx

 

 

iteye_4796
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html打印预览导致一些监听事件失效处理
lan_学习分享
08-08 2706
最近在iframe嵌入一个html，html中有一些input框和textarea框需要监听变动事件，没有点击打印之前都是可以正常监听得到的，但是调用打印方法以后就监听不到了，在打印的时候调用了alert方法查看打印的html内容，发现原来的script部分本来是写在&lt;/body&gt;标签后面的，结果变成了&lt;/body&gt;标签之前了，这个问题其实展示的就是打印的时候我们把html...
页面显示按钮，打印时不显示
txz2003的专栏
01-23 1576
@media print{ INPUT {display:none}} 
layui 隐藏工具栏打印按钮_iOS工具栏
weixin_39662834的博客
12-20 368
iOS>栏>工具栏工具栏显示在屏幕底部，工具栏上放置一些用来操控内容视图的功能按钮。工具栏可以是半透明的，能够显示出内容区域色调，而且当人们不需要用它们的时候，他们经常会被隐藏掉。例如，在Safari(苹果浏览器)中，当滚动屏幕时(寓意着用户在阅读)，工具栏会被隐藏掉。您可以通过点击屏幕底部来再次唤起工具栏。当键盘出现时，工具栏也会被隐藏掉。图1.1 图片介绍1.设置相关的(...
打印不显示打印按钮及获取其他属性（转载）
a479778594的博客
06-15 1562
传送门：http://dianziermu.iteye.com/blog/375992今天弄了下打印相关的的内容，主要是为了打印页面内容的时候不想同时打印出“打印按钮”。主要有五种方法（其中6为删除打印页眉页脚的例子）： 1、打印前将style隐藏，打印后再显示出来。该方法较简单，且可以写成一个共有的方法，推荐。 Html代码  style.display="none";  window.prin...
js打印按钮不显示
dianqianpang2137的博客
12-07 148
<style> @media print { .pn {display:none;} } </style> 或 <input type=button class="pn" value="print"> 或 <script language="javascr...
C#打印类PrintDocument、PrintDialog、PrintPreviewDialog使用示例
09-03
最后，通过`printDialog1.ShowDialog()`来显示对话框并获取用户的打印设置。 ```csharp private void button1_Click(object sender, EventArgs e) { PrintDocument printDocument1 = new PrintDocument(); ...
React如何实现浏览器打印部分内容详析
10-16
我们可以使用`ref`属性来获取这个元素的引用，方便后续操作： ```jsx <div ref={el => (this.printRef = el)}> {/* 打印内容 */} ``` 接下来，我们需要监听打印事件。这可能是按钮点击、页面加载或其他与...
layui的表格table选中数据后可打印本行数据
10-26
layui的表格table选中数据后可打印本行数据,未打印时不显示，只在打印页面显示打印内容。只是做了一个简单的demo，页面需要自己去画，方法已实现。有具体的指导步骤
如何点击打印，直接打印出来，不弹打印设置选项
farxix的博客
12-06 2万+
现在有两种解决方案,亲测有效。 (1).第一种是需要安装插件,网上下载ScriptX.cab文件 下载成功后将文件放在项目某个目录下,然后在页面body中写上: (记得codebase属性为ScriptX.cab文件的放置路径,是绝对路径) 把window.print()改成:factory.printing.Print(false)即可; 远程访问时需要在IE浏览器设置: 1.安全
前端网页打印插件print.js
yc1425869600的博客
08-31 3341
在前端开发中，想打印当前网页的指定区域内容，或将网页导出为多页的PDF，可以借助print.js实现，该插件轻量、简单、手动引入、不依赖其他库。可通过设置 class 类名或 id 指定打印区域，但vue项目涉及到打包部署，推荐使用 ref 获取DOM节点，如果使用 id 或 class 获取，打包部署后打印内容可能显示空白。值接近打印预览时宽度，700px左右即可。解决办法：尽可能把下拉框宽度调宽，如果效果仍然不好，可以考虑在下拉框同级写个textarea，在打印时，控制下拉框和文本域的显示隐藏。...
隐藏页面所有button
u012110480的专栏
01-14 637
editButtonStatus:function() { var btns = document.getElementsByTagName('button'); for (var i = 0; i < btns.length; i++) { btns[i].style.displa...
js实现单元格没有内容的行隐藏document.getElementsByTagName
haining711的专栏
03-26 1028
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档       标题     内容          文字1     11         文字2     11         文字3     &n
js动态控制表单的tr，td的显示和隐藏
热门推荐
shao.bing的专栏
06-03 7万+
无论是事先写好的，还是动态生成的，要找到指定的tr或td都必须知道其相关的一个属性，未必必须是id或name，然后无论是在一个table还是多个table都可以通过document.getElementsByTagNames( "tr ")或td，取得集合，……再根据知道的属性再找，最后设置显示/隐藏 方法一： document.getElementById( "控件ID
webdriver隐藏元素的处理(二)--getElementsByTagName
可口可乐的博客
11-26 1327
在上一篇文章中我们提到有关隐藏元素的webdriver的定位方法--使用JS，这个时候可以用getElementById,getElementsByName和getElementsByTagName来定位，并同时可以调用相应的方法。    在用getElementById,getElementsByName对元素进行定位操作的时候，方法相对简单，并在上篇文章中也有举例。但是用getElement
getElementsByName 的应用－获取radio button组的选择值
weixin_33800593的博客
06-27 871
getElementsByName用来获取name一样的一组元素。应用：获取一组radio button 的选中值。例子如下： <html><head><title>getElementsByNameSample</title><scripttype="text/javascript"language="javascript"&...
javascript 打印不显示按钮的方法
萝卜丝机007
03-22 4981
@media print { .noprint{display:none;} }    打印去掉页眉页脚和日期的脚本 function doPrint() { // 获得body的html bdhtml=window.document.body.innerHTML; // 打印开始的标志
js的window.print打印页面 不打印网页中的“打印”按钮
iilegend的博客
09-01 5334
设置样式来控制不打印“打印”按钮：<style type="text/css" media="print"> .noprint { display:none;} </style>然后把它应用到 “打印”按钮上：<input type="button" name="button" id="button" value="打印" class="noprint" />这样可以实现 在页面展示的时候有“打印”
winform 访问api获取数据,并且按照数量打印
最新发布
07-14
6. 根据需要，可以在WinForm中创建一个打印预览或打印按钮，用于打印处理后的数据。可以使用PrintDocument和相关的打印组件来实现打印功能。 7. 在打印操作中，可以使用循环和打印组件的功能，逐个打印每条数据，或...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值