使用ScriptX控件实现web打印的功能,网上一抓一大把,我这里就不写怎么用了,就直接说可能碰到的一些问题和解决办法吧。
1、使用ScriptX控件进行打印,通常都是在HTML中嵌入:
使用这种方法第一次打印不会有问题,但是第二次在不刷新的情况下再次打印会报错:浏览器只允许运行一个ScriptX控件 。
因此可以考虑:
a、页面初始化时HTML中不嵌入Object标签,也就是不添加打印功能;
b、打击“打印”或“打印预览”时再使用JS添加Object标签,然后进行打印或打印预览;
c、打印完成了再使用JS移除掉Object,保证每次都只有一个ScriptX控件在运行。
注意点:
打印过程我们没法控制,因此我们也没法(或者说并不是每次都能精准地)精准地移除Object控件,若不能成功移除第二次打印时就可能还是会出现上面说的问题。
这时可以将smsx.cab控件安装一下,然后再修改注册表。如何操作各位百度吧!
2、在IE8中点击了“打印”或“打印预览”之后没有任何效果:
要想使用ScriptX控件进行打印,还得设置一下浏览器的ActiveX控件,主要是两个地方:
a、对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本
b、下载未签名的ActiveX控件
打开IE浏览器,找到“工具”-->“Internet选项”-->“安全”-->“自定义级别”,再找到以上说的两项,设置成“启用”或“提示”,然后再点击“打印”或“打印预览”,此时就会弹出提示问“是否安装”或“是否允许运行”,选择允许,待安装完成再打印就可以了。
注意点:
默认情况下,安全选项卡的“区域设置”中默认选定的是“Internet”,要是这个设置了以上两项还是没有反应,就将“本地Intranet”也设置一下。一版设置到“Internet”和“本地Intranet”再点击时应该就有反应了。
3、在打印的时候插入分页符:
在打印的时候,有时候需要强制换页,譬如有一个单子,一式两份,在网页上是展示在一个HTML中的,打印出来自然就是作为一张纸打印的,但是前面说了要一式两份,因此第二份要打印到第二张纸上。这个时候就需要使用page-break-before:always;什么的来进行分页了。
这个page-break主要有三个值:
page-break-before:设置在表格元素之后始终进行分页的分页行为。它可以取值auto/always/avoid/left/right/inherit。(参考:http://www.w3school.com.cn/cssref/pr_print_page-break-before.asp)
page-break-after:设置在表格元素之后始终进行分页的分页行为。它可以取值auto/always/avoid/left/right/inherit。(参考:http://www.w3school.com.cn/cssref/pr_print_page-break-after.asp)
page-break-inside:设置在表格元素内部避免进行分页的分页行为,它可以取值avoid/auto/inherit。(参考:http://www.w3school.com.cn/cssref/pr_print_page-break-inside.asp)
各个值的含义:
值 | 描述 |
auto | 如果必要则在元素前/后插入分页符 |
always | 在元素前/后插入分页符。 |
avoid | 避免在元素前/后插入分页符。 |
left | 在元素之前/后足够的分页符,一直到一张空白的左页为止。 |
right | 在元素之前/后足够的分页符,一直到一张空白的右页为止。 |
inherit | 规定应该从父元素继承 page-break-after 属性的设置。 |
注意点:
a、所有浏览器都支持 page-break-before、page-break-after属性,只有 Opera 浏览器支持 page-break-inside 属性。
b、任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "left"、"right" 以及 "inherit"。
c、Firefox、Chrome 以及 Safari 不支持属性值 "avoid"、"left" 以及 "right"。
d、这个分页符若是添加在DIV上则没有任何效果,譬如:
table系列的标签对于这个分页符好像支持的特别好,无论是设置在tr上还是table上,都能正常断页。
我这里就是直接在两个DIV之间了table用来实现一式两份的打印功能。
4、打印的时候没有背景色:
这个背景色是需要设置的,默认情况下web的打印时没有背景色的。设置主要有两个地方:
a、打开IE浏览器,找到“工具”-->“Internet选项”-->“高级”,找到“打印背景颜色和图像”,然后勾选,如图:
b、设置了上面的功能之后,预览情况下还是没有背景色,这个时候还需要设置一下“页面设置”。在“打印预览”页面有个“页面设置”,打开它,找到“打印背景颜色和图像”,“确定”之后可以看到预览区有背景色的都显示出来了。
至此,打印背景色看似没有问题了,实际上它还有一个问题:我总不能每次都设置一遍允许打印背景颜色吧。对的,不可能每次都设置,那能不能找个一劳永逸的在打印用到的print_utils.js进行设置呢?
可以设置,在printBase方法中添加:factory.printing.printBackground = true;允许打印背景色。设置时没错,但是打印的时候会报错:
为什么会这样子呢?因为printBackground的设置时高级应用,是要收费的。而当前用的基本上都是免费的,它只能修改基本设置。
以下是ScriptX控件常用的参数设置:
// -------------------基本功能,可免费使用----------------------- factory.printing.header = "";//页眉 factory.printing.footer = "";//页脚 factory.printing.SetMarginMeasure(1);//页边距单位,1为毫米,2为英寸 //边距设置,需要注意大部分打印机都不能进行零边距打印,即有一个边距的最小值,一般都是6毫米以上 //设置边距的时候时候如果设置为零,就会自动调整为它的最小边距 factory.printing.leftMargin = 7;//左边距 factory.printing.topMargin = 7;//上边距 factory.printing.rightMargin = 7;//右边距 factory.printing.bottomMargin = 7;//下边距 factory.printing.portrait = true;//是否纵向打印,横向打印为false //--------------------高级功能--------------------------------------------- factory.printing.printer = "EPSON LQ-1600KIII";//指定使用的打印机 //factory.printing.printer = "\\\\cosa-data\\HPLaserJ";//如为网络打印机,则需要进行字符转义 factory.printing.paperSize = "A4";//指定使用的纸张 factory.printing.paperSource = "Manual feed";//进纸方式,这里是手动进纸 factory.printing.copies = 1;//打印份数 factory.printing.printBackground = false;//是否打印背景图片 factory.printing.SetPageRange(false, 1, 3); //打印1至3页 //---------------------常用函数-------------------------------- factory.printing.Print(false);//无确认打印,true时打印前需进行确认 //factory.printing.Print(false, pageFrame); pageFrame为Iframe或Frame框架名称,只打印框架内容 factory.printing.PrintSetup();//打印设置 factory.printing.Preview();//打印预览 factory.printing.WaitForSpoolingComplete();//等待上一个打印任务完全送入打印池,在连续无确认打印时非常有用 factory.printing.EnumPrinters(index);//枚举已安装的所有打印机,主要用于生成打印机选择功能
5、最后附上页面调用打印功能的JS:
/** * 打击“打印预览”按钮时触发该事件 * */ function printpage(){ $("body").append(''); var printdiv = document.getElementById("page"); printdiv.style.overflow=""; previews(); printdiv.style.overflow="auto"; $("#factory").remove(); } /** * 打击“打印”按钮时触发该事件 * */ function printTures() { $("body").append(''); var printdiv = document.getElementById("page"); printdiv.style.overflow=""; printBase(); document.getElementById("print").style.display = "none";// 隐藏按钮 factory.printing.Print(false); document.getElementById("print").style.display = "block";// 显示按钮 $("#factory").remove(); } /** * 调用ScriptX控件进行打印预览 * */ function previews(){ printBase(); document.getElementById("print").style.display = "none";// 隐藏按钮 factory.printing.Preview(); document.getElementById("print").style.display = "block";// 显示按钮 $("#factory").remove(); }
附:附件中有打印用到的JS工具包,其中print_utils为横向打印用的JS,print_utils2为竖向打印用的JS。其实两者内容都是一样的,就是printBase方法中的factory.printing.portrait设置不一样,若为true就是纵向打印,false就是横向打印 。
希望对大家有所帮助!