使用JavaScript创建打印友好的页面。

开始

3.58/5 (18投票s)

2005年10月21日

2分钟阅读

204363

2498

使用JavaScript创建打印友好的页面，将内容直接写入弹出窗口。使用此脚本可以创建用于打印数据的弹出窗口。

下载演示项目 - 2 Kb

Sample screenshot

引言

创建打印友好的页面，将内容直接写入弹出窗口。

使用此脚本可以创建用于打印数据的弹出窗口。

它仅使用在div元素之间定义的内容生成一个新页面。

<div class="style3" id="print_content"> </div>

其他所有内容将被忽略。

新页面通过以下脚本调用

<a href="javascript:PrintThisPage()">点击此处打印</a>

使用JavaScript，我们可以指定窗口的属性，例如宽度、高度、滚动条的有无、地址栏、状态栏等。

属性，例如


toolbar=0|1   指定是否在新窗口中显示工具栏。 
location=0|1   指定是否在新窗口中显示地址栏。 
directories=0|1 指定是否显示Netscape目录按钮。 
status=0|1   指定是否显示浏览器状态栏。 
menubar=0|1   指定是否显示浏览器菜单栏。 
scrollbars=0|1  指定新窗口是否应具有滚动条。 
resizable=0|1   指定新窗口是否可调整大小。 
width=像素   指定新窗口的宽度。 
height=像素   指定新窗口的高度。 
top=像素   指定新窗口左上角的Y坐标。（在版本3的浏览器中不支持。） 
left=像素   指定新窗口左上角的X坐标。（在版本3的浏览器中不支持。）

<CODE>var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,"; disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";

使用 innerhtml 属性读取 DIV 和 /DIV 标签之间的内容。

var content_vlue = document.getElementById("print_content").innerHTML;

window.open() 方法打开一个新浏览器窗口

我们必须创建一个新窗口并将对它的引用存储在一个变量中

var docprint=window.open("","",disp_setting);

每个窗口都包含一个文档。我们使用 docprint.document.write 方法将内容写入 newwindow。

在 BODY 元素内的 onLoad 属性中执行 (javascript onLoad="self.print() )
函数并显示打印屏幕。

docprint.document.write('</head><body onLoad="self.print()"><center>');

docprint.document.close(); 在末尾与 window.close() 有些不同，它意味着弹出窗口内的文档已关闭以供写入。我们必须自己关闭文档。如果我们没有关闭文档，计算机将仍在等待更多 HTML，并且实际上会将下一个输入解析为 HTML，这将通常产生错误。
<CODE> docprint.focus();

这意味着焦点在新弹出窗口上。

Complete  Source Code:
======================
<!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=iso-8859-1" />
<title>Clinet side printer version</title>
<style type="text/css">
<!--
.style1 {color: #0033FF}
.style3 {
 font-size: 12px;
 font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
</head> 
<script language="javascript">
function Clickheretoprint()
{ 
  var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,"; 
      disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25"; 
  var content_vlue = document.getElementById("print_content").innerHTML; 
  
  var docprint=window.open("","",disp_setting); 
   docprint.document.open(); 
   docprint.document.write('<html><head><title>Inel Power System</title>'); 
   docprint.document.write('</head><body onLoad="self.print()"><center>');          
   docprint.document.write(content_vlue);          
   docprint.document.write('</center></body></html>'); 
   docprint.document.close(); 
   docprint.focus(); 
}
</script>
<body bgcolor="#CCCCCC">
<table width="80%" border="0" align="center" cellpadding="4" cellspacing="4" bgcolor="#FFFFFF">
  <tr>
    <td colspan="2" bgcolor="#CCCCFF"><h2 align="center" class="style1">Site Header Name </h2></td>
  </tr>
  <tr>
    <td width="16%" valign="top" bgcolor="#CCCCFF"> <table width="62%" border="0" align="center" cellpadding="0" 
cellspacing="0">
      <tr>
        <td><a href="#">Link1</a></td>
      </tr>
      <tr>
        <td><a href="#">Link2</a></td>
      </tr>
      <tr>
        <td><a href="#">Link3</a></td>
      </tr>
    </table></td>
    <td width="84%">
    <div align="right"><a href="javascript:Clickheretoprint()"> Click here to print</a>    </div>
    <div class="style3" id="print_content">Content for  id "print_content" Goes Here
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>Print content Print content Print content Print content Print content Print content Print content Print content 
Print content Print content Print content Print content Print content Print content Print content Print content Print content 
Print content Print content Print content Print content Print content Print content Print content Print content Print content 
Print content Print content Print content Print content Print content Print content Print content Print content Print content 
Print content Print content Print content Print content Print content Print content Print content Print content Print content 
Print content Print content Print content Print<br />
            <br /> 
            content Print content Print content Print content Print content Print content Print content Print content Print 
content Print content Print content Print content Print content Print content Print content Print content Print content Print 
content Print content Print content Print content Print content Print content Print content Print content Print content Print 
content Print content Print content Print content Print content Print content Print content Print content Print content Print 
content Print content Print content Print content Print content Print content Print content Print content Print content Print 
content Print content Print content Print content Print content Print content Print content Print content Print content Print 
content Print content Print content Print content Print content Print content Print content Print content Print content Print 
content Print content Print content Print content Print content Print content Print content Print content </td>
        </tr>
      </table>
    </div></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#CCCCFF"><span class="style3">footer</span></td>
  </tr>
</table>
</body>
</html>