Web打印解决方案之普通报表打印功能


Posted in Javascript onAugust 29, 2016

做过很多的Web项目,大多数在打印页面内容的时候,采用的都是通过Javascript调用系统内置的打印方法进行打印,也就是调用PrintControl.ExecWB(?,?)实现直接打印和打印预览功能。打印的效果及控制性虽然不是很好,但是也能勉强使用,应付一般的打印还是可以的了。

代码如下所示:

代码

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->//调用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+"<OBJECT ID=\"PrintControl\" WIDTH=0 HEIGHT=0 CLASSID=\"CLSID:8856F961-340A-11D0-A96B-00C04FD705A2\"></OBJECT>";
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}","style='display:none'");
if(content.indexOf("ID=\"PrintControl\"")<0) content=content+"<OBJECT ID=\"PrintControl\" WIDTH=0 HEIGHT=0 CLASSID=\"CLSID:8856F961-340A-11D0-A96B-00C04FD705A2\"></OBJECT>";
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脚本出错。"); }
}

上面两个函数放在一个Js文件中,在页面内容中通过应用该脚本文件并调用进一步封装的函数即可打印指定部分的内容:

<script language="javascript">
function Print(preview) {
var text = document.getElementById("content").innerHTML;
printConten(preview, text);
}

打印的效果大致如下图所示,如果打印的页面在框架页面中,那么需要选定“仅打印选定框架”的选项。

Web打印解决方案之普通报表打印功能

采用此种方法,不需要安装任何控件,具有很好的兼容优势,不过出来的报表内容,好像控制起来会比较麻烦一些,特别对于一些报表方面的打印,需要输出复杂的内容是,也有一定的缺陷,但总体来说,也是一个较好的选择。

后来在需要做一些证件套打方面的工作,这个控件就做不到了,因此需要一种方法或者控件,能够较好处理套打方面的事情。

无意间,发现一个比较好的打印控件,支持各种格式的打印,还有我关心的证件套打功能,功能强大,使用也很简单的,非常值得推荐。

应用这个控件,普通报表的打印效果如下所示:

Web打印解决方案之普通报表打印功能

上面两个报表的打印其实都差不多,都是打印部分的HTML内容,不过后者看起来要好一点,而且提供很完善的报表功能设置。

代码大致如下所示。

代码

<script language="javascript">
function Print(preview) {
var text = document.getElementById("content").innerHTML;
printConten(preview, text);
}
</script>
<script language="javascript" src="http://www.cnblogs.com/Scripts/CheckActivX.js"></script>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0> </object> 
<script language="javascript">
var LODOP = document.getElementById("LODOP"); //这行语句是为了符合DTD规范
CheckLodop();
</script>
<script language="javascript" type="text/javascript">
function Preview() {//打印预览
CreateLicenseData();
LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);
LODOP.PREVIEW();
};
function Setup() {//打印维护 给用户调整位置
CreateLicenseData();
LODOP.PRINT_SETUP();
};
function Design() {//打印设计 开发人员设置内容和位置
CreateLicenseData();
LODOP.PRINT_DESIGN();
};
function CreateLicenseData() {
LODOP.PRINT_INIT("查询报表");
LODOP.ADD_PRINT_HTM(20, 40, 610, 900, document.all("content").innerHTML);
LODOP.PREVIEW();
}
</script>

很多时候,我们也没的内容,都是通过CSS来控制美观的,所以有时候,我们打印部分HTML,没有这些样式的话,那么出来的Table格式和字体,可能都会发生变化,不太好看。那么就需要进行HTML的样式设置。

Web打印解决方案之普通报表打印功能

如果给打印内容设置了样式,那么出来的界面效果就好很多了。

Web打印解决方案之普通报表打印功能

设置样式的代码如下所示。

代码

<script language="javascript" type="text/javascript">
function Preview() {//打印预览
CreateLicenseData();
LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);
LODOP.PREVIEW();
};
function CreateLicenseData() {
LODOP.PRINT_INIT("申请处理单");
var strBodyStyle = "<link type='text/css' rel='stylesheet' href='http://www.cnblogs.com/Themes/Default/style.css' /><style><!--table { border:1;background-color: #CBCBCC } td {background-color:#FFFFFE;border: 1; } th { background-color:#F1F1F3;padding-left:5px;border:1}--></style>";
var strFormHtml = strBodyStyle + "<body>" + document.getElementById("content").innerHTML + "</body>";
LODOP.ADD_PRINT_HTM(20, 40, 610, 900, strFormHtml);
LODOP.PREVIEW();
}
</script>

以上所述是小编给大家介绍的Web打印解决方案之普通报表打印功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
jQuery获取select选中的option的value值实现方法
Aug 29 #Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 #Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 #Javascript
浅谈js数据类型判断与数组判断
Aug 29 #Javascript
判断js的Array和Object的实现方法
Aug 29 #Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 #Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 #Javascript
You might like
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
php按单词截取字符串的方法
2015/04/07 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
PHP代码加密的方法总结
2020/03/13 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
js验证表单第二部分
2006/11/25 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
光声世纪笔试题目
2012/08/25 面试题
幼儿园消防安全制度
2014/01/26 职场文书
优秀幼教自荐信
2014/02/03 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis