HTML 页面打印

最新推荐文章于 2024-06-10 16:43:59 发布
最新推荐文章于 2024-06-10 16:43:59 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： js_jQuery_ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011403672/article/details/50483132
版权


HTML 页面打印

 


//首先要添加代码 ↓↓↓
< object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" width="0"></ object >
 
//实现打印功能代码
< input type="button" value="打印" onclick="document.all.WebBrowser.ExecWB(6,1)" />
< input type="button" value="直接打印" onclick="document.all.WebBrowser.ExecWB(6,6)" />
< input type="button" value="页面设置" onclick="document.all.WebBrowser.ExecWB(8,1)" />
< input type="button" value="打印预览" onclick="document.all.WebBrowser.ExecWB(7,1)" />
 
//打印特殊样式
<!--media=print 这个属性可以在打印时有效-->
< style media="print">
　　.Noprint{display:none;} //隐藏不需要的控件
　　.PageNext{page-break-after: always;} //分页打印标记
</ style >

//jsp有时候不兼容样式不知道怎么回事   不过引入一下样式是可以的
 <style>    
 @media print {  
  .noprint {   
   display: none   
  }  
 }  
 </style>

//在js中设置页眉页脚页边距
$(function(){
   //设置页眉页脚页边距
   PageSetup_Null();
  });
  
  //设置网页打印的页眉页脚和页边距    
  var HKEY_Root,HKEY_Path,HKEY_Key;  
 HKEY_Root="HKEY_CURRENT_USER";  
 HKEY_Path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
 function PageSetup_Null()  
 {  
   try  
   {  
    //安全性较高的系统环境，需要取消限制ActiveX控件的创建，操作步骤如下
    //internet选项—— 安全—— 自定义级别—— 把对没有标记为安全的activex控件进行初始化和脚本运行 设置为启用。
     var Wsh=new ActiveXObject("WScript.Shell");  
     HKEY_Key="header"; 
   //设置页眉（为空） 
     Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");
     HKEY_Key="footer";  
   //设置页脚（为空） 
     Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");
     HKEY_Key="margin_bottom";  
   //设置下页边距（0） 
     Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0");  
     HKEY_Key="margin_left";  
   //设置左页边距（0） 
     Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0");  
     HKEY_Key="margin_right";  
   //设置右页边距（0） 
     Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0");  
     HKEY_Key="margin_top";  
   //设置上页边距（0） 
     Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0");  
   }  
   catch(e){ 
      //alert("不允许ActiveX控件"); 
   }  
 }

 

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
< html >
< head >
     < meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
     < title >看看</ title >
     < meta http-equiv="Content-Type" content="text/html; charset=gb2312">
     <!--media=print 这个属性可以在打印时有效-->
     < style media="print">
         .Noprint
         {
             display: none;
         }
         .PageNext
         {
             page-break-after: always;
         }
     </ style >
     < style >
         .tdp
         {
             border-bottom: 1 solid #000000;
             border-left: 1 solid #000000;
             border-right: 0 solid #ffffff;
             border-top: 0 solid #ffffff;
         }
         .tabp
         {
             border-color: #000000 #000000 #000000 #000000;
             border-style: solid;
             border-top-width: 2px;
             border-right-width: 2px;
             border-bottom-width: 1px;
             border-left-width: 1px;
         }
         .NOPRINT
         {
             font-family: "宋体";
             font-size: 9pt;
         }
     </ style >
</ head >
< body >
     < center class="Noprint">
         < p >
             < object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0"
                 width="0">
             </ object >
             < input type="button" value="打印" onclick="document.all.WebBrowser.ExecWB(6,1)">
             < input type="button" value="直接打印" onclick="document.all.WebBrowser.ExecWB(6,6)">
             < input type="button" value="页面设置" onclick="document.all.WebBrowser.ExecWB(8,1)">
             < input type="button" value="打印预览" onclick="document.all.WebBrowser.ExecWB(7,1)">
             < br />
         </ p >
     </ center >
     < table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">
         < tr >
             < td colspan="3" class="tdp">
                 第1页
             </ td >
         </ tr >
         < tr >
             < td width="29%" class="tdp">
                  
             </ td >
             < td width="28%" class="tdp">
                  
             </ td >
             < td width="43%" class="tdp">
                  
             </ td >
         </ tr >
         < tr >
             < td colspan="3" class="tdp">
                  
             </ td >
         </ tr >
         < tr >
             < td colspan="3" class="tdp">
                 < table width="100%" border="0" cellspacing="0" cellpadding="0">
                     < tr >
                         < td width="50%" class="tdp">
                             < p >
                                 这样的报表</ p >
                             < p >
                                 对一般的要求就够了。</ p >
                         </ td >
                         < td >
                              
                         </ td >
                     </ tr >
                 </ table >
             </ td >
         </ tr >
     </ table >
     <!--分页-->
     < div class="PageNext">
     </ div >
     < table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">
         < tr >
             < td class="tdp">
                 第2页
             </ td >
         </ tr >
         < tr >
             < td class="tdp">
                 看到分页了吧
             </ td >
         </ tr >
         < tr >
             < td class="tdp">
                  
             </ td >
         </ tr >
         < tr >
             < td class="tdp">
                  
             </ td >
         </ tr >
         < tr >
             < td class="tdp">
                 < table width="100%" border="0" cellspacing="0" cellpadding="0">
                     < tr >
                         < td width="50%" class="tdp">
                             < p >
                                 这样的报表</ p >
                             < p >
                                 对一般的要求就够了。</ p >
                         </ td >
                         < td >
                              
                         </ td >
                     </ tr >
                 </ table >
             </ td >
         </ tr >
     </ table >
     <!--分页-->
     < div class="PageNext">
     </ div >
     < table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">
         < tr >
             < td class="tdp">
                 第3页
             </ td >
         </ tr >
         < tr >
             < td class="tdp">
                 看到分页了吧
             </ td >
         </ tr >
         < tr >
             < td class="tdp">
                  
             </ td >
         </ tr >
         < tr >
             < td class="tdp">
                  
             </ td >
         </ tr >
         < tr >
             < td class="tdp">
                 < table width="100%" border="0" cellspacing="0" cellpadding="0">
                     < tr >
                         < td width="50%" class="tdp">
                             < p >
                                 这样的报表</ p >
                             < p >
                                 对一般的要求就够了。</ p >
                         </ td >
                         < td >
                              
                         </ td >
                     </ tr >
                 </ table >
             </ td >
         </ tr >
     </ table >
</ body >
</ html >


py强子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java打印html
10-16
在Java编程环境中，打印HTML文档是一项常见的任务，特别是在开发Web应用程序或者需要将网页内容输出到纸质媒介时。本文将深入探讨如何使用纯Java API来实现HTML（包括HTML5）的打印服务，以及如何预先设置默认的...
html页面实现数据打印效果
11-21
在IT领域，HTML页面实现数据打印效果是一种常见的需求，尤其在报表展示和文档输出时。本文将详细解析如何通过HTML、JavaScript以及后台数据交互来实现这一功能。 首先，我们需要理解HTML的基本结构，它是构建网页的...
js 打印指定内容_如何实现js打印
weixin_39519619的博客
11-30 465
js打印有两种方式：当前页面打印和新窗口打印，根据项目需求选择适合的方式第一种打印方式：当前页面打印js代码：const printHtml = document.querySelector('.print-content').innerHTML; // 需要打印的内容 window.document.body.innerHTML = printHtml; window.print(); wind...
HTML页面动态内容打印（文字、图片等）
中国程序猿
01-05 1751
HTML页面动态内容打印（文字、图片等），本文使用jsp做讲解，不同框架如vue等前后端分离项目依然可以参考，最重要的是打印页的样式调试问题，有的样式会失效需要特殊处理
【前端】使用window.print() 前端实现网页打印详细教程（含代码示例）
最新发布
06-10 1万+
【前端】使用window.print() 前端实现网页打印详细教程（含代码示例）
用纯HTML写一个凭证并打印
技术刚刚好
02-18 1521
24. `document.getElementById("currentDate").innerText = year + "年" + month + "月" + day + "日";12. `.headStyle { ... }`、`.headTitleLift { ... }`、`.title { ... }`等：定义了一些自定义样式，用于配水单头部和表格的布局。11. `@media print { ... }`：定义在打印模式下的样式，这里设置了`.no-print`类在打印时不显示。
打印HTML参数代码
Anlinana的博客
07-22 743
<?php print_r($data);die();?>
html页面实现打印
weixin_46410916的博客
07-27 3574
html页面实现打印功能方式一 打印整个html页面方式二 通过获取页面html内容打印 方式一 打印整个html页面 <!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" > <head> <th:block th:include="include :: header('修改学员基本信息')" /> <style> input[di
jQuery打印指定区域Html页面并自动分页
10-25
在网页开发中，有时我们需要对特定的HTML区域进行打印，而不是整个页面。在这种情况下，`jQuery.PrintArea.js`插件提供了一个解决方案，它允许我们指定要打印的区域，并且能够自动进行分页。这个插件特别适用于那些...
html打印预览
12-30
在HTML页面中实现打印预览是一项常见的需求，特别是在网页中展示文档或报表时。这个主题主要涉及HTML、jQuery和打印技术。以下是对这些知识点的详细解释： ### HTML 打印预览基础 HTML本身并不直接支持打印预览功能...
前端实现打印html页面任意内容
07-26
前端可以打印差前端展示的任意页面的任意内容，只需制定dom节点包裹的内容，即可实现不改变任何样式的前提下安装一定比例缩放A4纸上完成打印。重点是保留原有格式。适合新手，下载可以用，对于vue还是react还是最...
打印csdn
weixin_45722843的博客
11-06 231
按F12，选择控制台，复制粘贴后按回车 (function(){ $("#side").remove(); $("#comment_title, #comment_list, #comment_bar, #comment_form, .announce, #ad_cen, #ad_bot").remove(); $(".nav_top_2011, #header, #navigator").remove(); $(".csdn-side-toolbar,.template-box,.reward-user-
问题解决：CSDN文章一键打印、输出PDF
NI‘CE’XIAN‘s blog
02-12 1478
https://mp.csdn.net/mp_blog/creation/editor/new
用JS在html页面实现打印功能
Roger_CoderLife的博客
12-11 4929
用JS在html页面实现打印功能 打印方式一： 打印方式二： 打印方式三（此方式会重新打开一个浏览器窗口）： 做项目时，有在网页实现全局和局部打印的需求，百度许久，现总结如下：   打印方式一： 1.首先在head里面加入下面一段js代码： &lt;script language="javascript"&gt; function preview(fang) { if (fang...
html页面实现打印功能
weixin_42518717的博客
06-14 6446
html页面实现打印功能可用代码效果截图 之前领导让我写一个html页面，可以进行打印，我上网搜了一下，html页面实现打印功能的博客有很多，这里我就不一一介绍了，直接上干货。 可用代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
HTML页面打印功能js代码,JavaScript_js实现页面打印功能实例代码(附去页眉页脚功能代码)，复制代码 代码如下: <html> - phpStudy...
weixin_39796533的博客
06-10 159
js实现页面打印功能实例代码(附去页眉页脚功能代码)复制代码 代码如下:@media print{.print {display:block;}.notPrint {display:none;}}function preview(){bdhtml=window.document.body.innerHTML;sprnstr="";eprnstr="";prnhtml=bdhtml.substr(b...
html打印不打印文件名,HTML元素不打印
weixin_39609622的博客
06-18 145
我正在使用this library生成条形码,我需要打印包含条形码的页面.当我启动打印对话框时,虽然占用空间,但我找不到条形码.$(document).ready(function() {window.print();});@media print {.barcode-container {display: block !important;}}ID: 60105Lorem ipsum dolor...
html页面怎么添加打印,在网页中添加打印按钮或链接的方法
weixin_29326909的博客
06-03 2242
在网页中添加打印按钮或链接的方法发布时间：2020-05-27 17:38:35来源：亿速云阅读：347作者：鸽子打印按钮或链接是对网页的简单添加CSS(层叠样式表)使你可以控制屏幕上的网页内容。 此控件也扩展到其他媒体，例如在打印网页时。你可能想知道为什么要在网页上添加打印功能; 毕竟，大多数人已经知道或可以轻松地知道如何使用浏览器的菜单打印网页。但是在某些情况下，在页面上添加打印按钮或链接不仅...
html网页打印helloworld
10-11
你可以使用以下的HTML代码在网页上打印"Hello World": ```html <!DOCTYPE html> <html> <h1>Hello World </html> ``` 将上述代码保存为一个HTML文件，然后在浏览器中打开该文件，你将在浏览器窗口中看到"Hello...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值