您的位置：首页 > 其它

使用ScriptX实现特殊效果的页面打印功能

2014-07-16 19:34 288 查看
使用ScriptX实现特殊效果的页面打印功能
1、ScriptX简介
在WEB项目中有很多要求用到页面打印的功能，如果没有特殊格式打印的情况下，基本使用windown对象的print方法是可以实现的。
但如果要实现横向打印，页眉，页脚设置等功能，就显得非常麻烦了。

ScriptX是一个实现上诉特殊要求的页面打印的JS控件，该控件只在IE中使用，使用该控件可以非常快速的实现这些功能。

ScriptX是一个商业工具软件，有免费版本和付费版本，如果过要使用其一些特殊的功能最好选择付费，当然，在一般的开发中免费版的
已经能满足我们大部分的要求了。

2、操作步骤如下：
1)下载ScriptX控件
官网地址 http://scriptx.meadroid.com/
找到smsx.cab，并行下载。ScriptX的cab包已经更名为smsx.cab。
对smsx.cab进行解压，在解压后的目录中找到ScriptX的配置文件smsx.inf，打开该文件，找到以下两行信息
[MCScripX.dll]
clsid={1663ed61-23eb-11d2-b92f-008048fdd814}

FileVersion=6,4,438,06

hook=ScriptX
2)将控件导入JSP页面
在<head></head>标签里面加入包含ScriptX控件信息的<object><object>标签。如下所示(将以下信息放入<head></head>)之间
<object id="factory" viewastext style="display:none"
classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" (对应第一步中的clsid)

codebase="(smsx.cab的存放路径)/smsx.cab#Version=6,4,438,06(对应上一步的FileVersion)">
3)使用JS进行设置
<script>
function printWindow() {

factory.printing.header = " ";                      //设置页眉信息
factory.printing.footer = "&b第 &p 页 / 共 &P 页&b";  //设置页脚信息

factory.printing.portrait = false;                  //设置页面打印方向，ture为纵向，false为横向
factory.printing.leftMargin = 1.0;                  //设置左边距

factory.printing.topMargin = 1.0;                   //设置上边距
factory.printing.rightMargin = 1.0;                 //设置有边距
factory.printing.bottomMargin = 1.0;                //设置下边距
factory.printing.Print(false);                      //设置打印预览，false为直接打印
}


</script>

设置页眉页脚信息，如“第n页/共m页”，IE浏览器为我们提供了实现这些特殊效果的符号，如下表格所示:

符号含义
&w 网页标题
&u 网页地址 (URL)
&d 短日期格式（由“控制面板”中的“区域设置”指定）
&D 长日期格式（由“控制面板”中的“区域设置”指定）
&t由“控制面板”中的“区域设置”指定的时间格式
&T 24 小时时间格式
&p 当前页码
&P 总页数
&b 文本右对齐（请把要右对齐的文字放在“&b”之后）
&b&b 文字居中（请把要居中的文字放在“&b”和“&b” 之间）
&& 单个 & 号 (&)
注：1、这些符号可以与文字组合使用，如本教程中的“页码，&p/&P”。
2、页眉和页脚默认是左对齐的，所以IE只提供了右对齐和居中的设置符号。

3、推荐给大家一种设置方法：页眉为空，页脚设为“&b第 &p 页 / 共 &P 页&b”，打印效果为在页脚居中显示“第 1 页 / 共 4 页”果。
4)使用CSS实现部分打印隐藏
一般在都要实现在打印时不能把一些信息(比如打印按钮)打印出来，可以使用CSS样式表的media属性实现。
首先在页面中添加如下的内嵌样式表:
<style media="print" type="text/css">
.Noprint {

display:none;

}

.PageNext {

page-break-after: always;

}

* {

word-wrap: break-word;

word-break: break-all;

}

</style>

接着使用div布局，将在打印时要屏蔽的信息包含在div里面，把div的class设置为Noprint，但我们点击打印按钮触发实现打印的JS函数时，
div的样式就会被触发，具体如下所示:
<div style="text-align:center; margin-top:15px;" class="Noprint">

<input type="button" align="right" class="BTN" value="打印" onclick="javascript:printWindow();">
<input name="Submit3" align="left" type="button" class="BTN" value="关闭" style="cursor:hand" onClick="window.close();"/>

</div>

5) 实现在分页时每一页都能打印出表头信息
把边表头信息放入到<table>的表头标签<thead></thead>之间，并设置<thead>的style的属性为"display:table-header-group"，如下所示:
<thead style="display:table-header-group">
放置要打印的信息
</thead>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航