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 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
js实现多图左右切换功能
Aug 04 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
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使用iconv中文截断问题的解决方法
2015/02/11 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python手写均值滤波
2020/02/19 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
七一建党节慰问信
2015/02/14 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书