前端之家 收集整理的这篇文章主要介绍了
Web打印解决方案之普通报表打印功能 ,
前端之家 小编觉得挺不错的,现在分享给大家,也给大家做个参考。
做过很多的Web项目,大多数在打印页面 内容 的时候,采用的都是通过Javascript调用 系统内置的打印方法 进行打印,也就是调用 PrintControl.ExecWB(?,?)实现直接打印和打印预览功能 。打印的效果 及控制性虽然不是很好,但是也能勉强使用,应付一般的打印还是可以的了。
代码 如下所示:
代码
//
调用 PrintControl.ExecWB(?,?)实现直接打印和打印预览
功能 。(直接用系统提供的print()
方法 打印无法隐藏某些区域)
//preview:是否
显示 预览。null/false:
不显示 ,true:
显示
function printPage(preview)
{
try
{
var content=window.document.body.innerHTML;
var oricontent=content;
while(content.indexOf("{$printhide}")>=0) content=content.replace("{$printhide}","style='display:none'");
if(content.indexOf("ID=\"PrintControl\"")<0) content=content+"
";
window.document.body.innerHTML=content;
//PrintControl.ExecWB(7,1)打印预览,(1,1)打开,(4,1)另存为,(17,1)全选,(10,1)属性 ,(6,1)打印,(6,6)直接打印,(8,1)页面 设置
if(preview==null||preview==false) PrintControl.ExecWB(6,1);
else PrintControl.ExecWB(7,1); //OLECMDID_PRINT=7; OLECMDEXECOPT_DONTPROMPTUSER=6/OLECMDEXECOPT_PROMPTUSER=1
window.document.body.innerHTML=oricontent;
}
catch(ex){ alert("执行Javascript脚本出错。"); }
}
function printConten(preview,html)
{
try
{
var content=html;
var oricontent=window.document.body.innerHTML;
while(content.indexOf("{$printhide}")>=0) content=content.replace("{$printhide}",1); //OLECMDID_PRINT=7; OLECMDEXECOPT_DONTPROMPTUSER=6/OLECMDEXECOPT_PROMPTUSER=1
window.document.body.innerHTML=oricontent;
}
catch(ex){ alert("执行Javascript脚本出错。"); }
}
上面两个函数 放在一个Js文件 中,在页面 内容 中通过应用该脚本文件 并调用 进一步封装的函数 即可打印指定部分的内容 :
打印的效果 大致如下图所示,如果打印的页面 在框架页面 中,那么需要选定“仅打印选定框架”的选项。
采用此种方法 ,不需要安装任何控件,具有很好的兼容优势,不过出来的报表内容 ,好像控制起来会比较麻烦一些,特别对于一些报表方面的打印,需要输出 复杂的内容 是,也有一定的缺陷,但总体来说,也是一个较好的选择。
后来在需要做一些证件套打方面的工作,这个控件就做不到了,因此需要一种方法 或者控件,能够较好处理套打方面的事情。
无意间,发现一个比较好的打印控件,支持 各种格式的打印,还有我关心的证件套打功能 ,功能 强大,使用也很简单的,非常值得推荐。
应用这个控件,普通报表的打印效果 如下所示:
上面两个报表的打印其实都差不多,都是打印部分的HTML内容 ,不过后者看起来要好一点,而且提供很完善的报表功能 设置。
代码 大致如下所示。
代码
很多时候,我们也没的内容 ,都是通过CSS来控制美观的,所以有时候,我们打印部分HTML,没有这些样式的话,那么出来的Table格式和字体,可能都会发生变化,不太好看。那么就需要进行HTML的样式设置。
如果给打印内容 设置了样式,那么出来的界面效果 就好很多了。
设置样式的代码 如下所示。
代码
" + document.getElementById("content").innerHTML + "