脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → web报表打印

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

 更新时间：2016年08月29日 11:38:53   作者：伍华聪  
这篇文章主要介绍了Web打印解决方案之普通报表打印功能的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

做过很多的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);
}

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

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

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

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

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

上面两个报表的打印其实都差不多，都是打印部分的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的样式设置。

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

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

代码

<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中关于类型判断的一些疑惑小结

    这篇文章主要给大家介绍了关于javascript中关于类型判断的一些疑惑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-10-10
  • JS实现数组去重方法总结(六种方法)

    JS实现数组去重方法总结(六种方法)

    这篇文章给大家总结下JS实现数组去重方法(六种方法)，面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法，感兴趣的朋友跟随脚本之家小编一起学习吧
    2017-07-07
  • js获取url中的参数且参数为中文时通过js解码

    js获取url中的参数且参数为中文时通过js解码

    这篇文章主要介绍了url中传递中文参数的时候通过js解码,需要的朋友可以参考下
    2014-03-03
  • 微信小程序用户授权最佳实践指南

    微信小程序用户授权最佳实践指南

    这篇文章主要给大家介绍了关于微信小程序用户授权最佳实践的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 在vue中为什么不能用index作为key

    在vue中为什么不能用index作为key

    这篇文章主要介绍了在vue中为什么不能用index作为key，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-09-09
  • 微信小程序开发之选项卡(窗口底部TabBar)页面切换

    微信小程序开发之选项卡(窗口底部TabBar)页面切换

    本文主要介绍了微信小程序开发之选项卡(窗口底部TabBar)页面切换的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • uniapp实现全局变量的几种方式总结

    uniapp实现全局变量的几种方式总结

    这里说全局变量,着重指的是能够全局动态响应的情况,下面这篇文章主要给大家介绍了关于uniapp实现全局变量的几种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 如何在javascript 中使用 xmlHttpRequest 发送 POST 请求

    如何在javascript 中使用 xmlHttpRequest 发送 POST

    本文将通过不同的示例解释如何使用JavaScript代码在AJAX编程中发送 XMLHttpRequest post 请求，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2023-07-07
  • 如何使用ImageDecoder API让GIF图片暂停播放

    如何使用ImageDecoder API让GIF图片暂停播放

    在本文中，我们介绍了如何使用ImageDecoder API来暂停GIF图像的播放，虽然这需要一些JavaScript编程知识，但它是一个非常强大的技术，可以让您对GIF图像进行各种高级操作，感兴趣的朋友跟随小编一起看看吧
    2023-06-06
  • JavaScript组件焦点与页内锚点间传值的方法

    JavaScript组件焦点与页内锚点间传值的方法

    这篇文章主要介绍了JavaScript组件焦点与页内锚点间传值的方法,涉及输入框与锚点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02

最新评论