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

来源：互联网发布：江西余干网络电信诈骗编辑：程序博客网时间：2024/04/29 04:18

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>)之间

classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" (对应第一步中的clsid)
codebase="(smsx.cab的存放路径)/smsx.cab#Version=6,4,438,06(对应上一步的FileVersion)">

3)使用JS进行设置

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属性实现。

首先在页面中添加如下的内嵌样式表:

.Noprint {
display:none;
}
.PageNext {
page-break-after: always;
}
* {
word-wrap: break-word;
word-break: break-all;
}
</style>

接着使用div布局，将在打印时要屏蔽的信息包含在div里面，把div的class设置为Noprint，但我们点击打印按钮触发实现打印的JS函数时，

div的样式就会被触发，具体如下所示:

5) 实现在分页时每一页都能打印出表头信息

把边表头信息放入到<table>的表头标签<thead></thead>之间，并设置<thead>的style的属性为"display:table-header-group"，如下所示:

放置要打印的信息

</thead>

0 0