报表打印技术-web打印

最新推荐文章于 2025-09-28 17:10:56 发布

原创最新推荐文章于 2025-09-28 17:10:56 发布 · 1.2k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#报表 #打印 #web #框架 #CSS

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍两种网页打印方法：一是通过指定框架打印内容，可精确控制打印范围；二是利用CSS媒体查询打印表格，主要用于调整打印样式。文章还提供了使用WebBrowser控件进行打印预览及打印后关闭页面的方法。

1.第一种方法：打印指定框架中的内容

此方法可以控制具体的打印内容

2.第二种方法：通过CSS样式打印表格

CSS样式打印控制的是指定表格的背景，不能控制表格内容的输出。

主要会用到CSS样式的media类型，media是媒体类型，用于直接引入媒体的属性。语法格式如下：

@media screen | print | projection | braille | aural | tv | handheld | all

【举例说明：】

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<style type="text/css">

@media print{

div{

display: none;

}

.bgnoprint{

background: display:none;

}

}

body{

margin-top: 0px;

}

</style>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<script type="text/javascript">

function printview{

document.all.myweb.ExecWB(7,1);//myweb是标签object的id；ExecWB(7,1)代表打印预览

window.close();
}

</script>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<object id="myweb" width="0" height="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2">

</object>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<body class="bgnoprint">

<table>

. . .  . . .

<div>

<a href="#" onclick="window.print();">打印</a>

<a href="#" onclick="printview();">打印预览</a>

</div>

</table>

</body>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

关于：原文链接

网页中的object其实就是一个COM组件（概念可以网上查一下）， classid就是这个COM组件在系统中注册的一个ID值，有了这个ID值系统才能找到这个COM组件对应的DLL文件，就像普通的软件用其他DLL时需要一个路径一样。而后面的codebase一般是用来下载和更新组件用的，比如浏览某个网页时，发现您的机器上没有安装这个组件，就会去codebase的地方下载组件，有了新的版本也会提示您安装新版本。基本就这样。

在网页中如果要设置 object的 classid属性。有个快捷实用的方法，在dreamweaver等类似软件中的 “插入对象” ，则该类工具会自动生成 classid。

WebBrowser是一个ie的打印控件

<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>

<input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开>

<input name=Button onClick=document.all.WebBrowser.ExecWB(2,1) type=button value=关闭所有>

<input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为>

<input name=Button onClick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印>

<input name=Button onClick=document.all.WebBrowser.ExecWB(6,6) type=button value=直接打印>

<input name=Button onClick=document.all.WebBrowser.ExecWB(7,1) type=button value=打印预览>

<input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置>

<input name=Button onClick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性>

<input name=Button onClick=document.all.WebBrowser.ExecWB(17,1) type=button value=全选>

<input name=Button onClick=document.all.WebBrowser.ExecWB(22,1) type=button value=刷新>

<input name=Button onClick=document.all.WebBrowser.ExecWB(45,1) type=button value=关闭>

如果想要打印完毕之后关闭页面，通常的window.print()+window.close()没办法实现，打印完后窗口依然还存在。

想要实现该效果，就可以通过使用WebBrowser控件，通过调用它的6,6方法直接打印，然后在其后加上window.close()就可以了

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。