JS网页打印设置技巧

最新推荐文章于 2024-09-02 17:34:00 发布
最新推荐文章于 2024-09-02 17:34:00 发布
阅读量3.1k 收藏 2
点赞数
分类专栏： 前端 文章标签： stylesheet function microsoft javascript header 浏览器
利用CSS样式打印是经常使用的一种打印方法，利用它可以非常方便的实现打印页面中的指定内容和分页打印，下面将通过具体实例介绍如何利用CSS样式打印。

［分析］：
1.打印样式区分：打印网页带页面样式，需指明一个media='print'的样式，建议分开，如下创建军一个bankprint.css打印样式文件。
<link rel="stylesheet" media="screen" type="text/css" href="/public/default/css/bank.css" />
<!-- 打印样式 -->
<link rel="stylesheet" media="print" type="text/css" href="/public/default/css/bankprint.css" />
例：
<style media=‘print’>

.Noprint {display:none;}

.PageBreak {page-break-after: always;}

</style>
说明：
media类型是CSS属性媒体类型，用于直接引入媒体的属性。其语法格式如下：
@media screen | print | projection | braille | aural | tv | handheld | all
参数说明
  screen：指计算机屏幕。
  print：指用于打印机的不透明介质。
  projection：指用于显示的项目。
  braille：盲文系统，指有触觉效果的印刷品。
  aural：指语音电子合成器。
  tv：电视类型的媒体。
  handheld：指手持式显示设备。
  all：用于所有媒体。
2.WebBrowser控件
同其他控件一样，首先我们需要在页面中嵌入WebBrowser控件，不过由于该控件是IE浏览器自带的，支持浏览器默认安全设置，因此避免了安全性设置的麻烦。对于IE7及以上安全性要求更高的浏览器，您或许还是需要自定义IE的安全性级别。
<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" id="wb" width="0" height="0"></OBJECT>
下面就是该控件涉及打印的功能调用，用户可以在JavaScrip中调用：
wb.execwb(6,1); //打印，打印当前页面
wb.execwb(7,1); //打印预览
wb.execwb(8,1); //打印设置，调出系统打印设置对话框

3.页眉、页脚设置:打印时，有的需要去掉页眉页脚，或替换成自已想要的。
<script language="JavaScript">
 
    var hkey_root,hkey_path,hkey_key;
      hkey_root="HKEY_CURRENT_USER";
      hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
      //配置网页打印的页眉页脚为空
      function pagesetup_null(){     
            try{
                  var RegWsh = new ActiveXObject("WScript.Shell");                 
                  hkey_key="header";                 
                  RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
                  hkey_key="footer";
                  RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
                  //&b 第&p页/共&P页 &b
            }catch(e){}
      }
      //配置网页打印的页眉页脚为默认值
      function pagesetup_default(){
            try{
                  var RegWsh = new ActiveXObject("WScript.Shell");
                  hkey_key="header";
                  RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&w&b页码，&p/&P")
                  hkey_key="footer";
                  RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&u&b&d");
            }catch(e){}
      }
...
</script>

[源码例子]:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打印设置</title>
<link rel="stylesheet" media="screen" type="text/css" href="http://www.chinasvf.com/Webs/public/default/css/bank.css" />
<!-- 打印样式 -->
<link rel="stylesheet" media="print" type="text/css" href="http://www.chinasvf.com/Webs/public/default/css/bankprint.css" />
<script language="JavaScript">
      var hkey_root,hkey_path,hkey_key;
      hkey_root="HKEY_CURRENT_USER";
      hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
      //配置网页打印的页眉页脚为空
      function pagesetup_null(){     
            try{
                  var RegWsh = new ActiveXObject("WScript.Shell");                 
                  hkey_key="header";                 
                  RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
                  hkey_key="footer";
                  RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
                  //&b 第&p页/共&P页 &b
            }catch(e){}
      }
      //配置网页打印的页眉页脚为默认值
      function pagesetup_default(){
            try{
                  var RegWsh = new ActiveXObject("WScript.Shell");
                  hkey_key="header";
                  RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&w&b页码，&p/&P")
                  hkey_key="footer";
                  RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&u&b&d");
            }catch(e){}
      }     
        //打印选区内容
      function doPrint() {
            pagesetup_null();
            bdhtml=window.document.body.innerHTML; 
            sprnstr="<!--startprint-->"; 
            eprnstr="<!--endprint-->"; 
            prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); 
            prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); 
            window.document.body.innerHTML=prnhtml; 
            window.print(); 
      }
      //打印页面预览
      function printpreview(){
            pagesetup_null();
            //wb.printing.header = "居左显示&b居中显示&b居右显示页码，第&p页/共&P页";
            //wb.printing.footer = "居左显示&b居中显示&b居右显示页码，第&p页/共&P页";
            try{
                  wb.execwb(7,1);
            }catch(e){
                  alert("您的浏览器不支持此功能,请选择'文件'->'打印预览'");
            }
      }
      //打印
      function prints(){
            pagesetup_null();
            //wb.printing.header = "居左显示&b居中显示&b居右显示页码，第&p页/共&P页";
            //wb.printing.footer = "居左显示&b居中显示&b居右显示页码，第&p页/共&P页";
            try{
                  wb.execwb(6,1);
            }catch(e){
                  alert("您的浏览器不支持此功能");
            }
      }
</script>
</head>
<body>
<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" id="wb" width="0" height="0"></OBJECT>
<div id="bankwrap">
  <div class="Noprint"><a href="http://www.chinasvf.com" style="cursor:pointer; color:#0000FF">返回首页</a></div>
  <div style="text-align:right">
      <p class="Noprint">
              <span style="cursor:pointer; color:#0000FF" οnclick="javascript:window.open('http://www.chinasvf.com/Webs/Share/printhelp')" class="Noprint">打印帮助</span>
              <span style="cursor:pointer; color:#0000FF" οnclick="printpreview();">打印预览</span>
              <span style="cursor:pointer; color:#0000FF" οnclick="prints();" class="Noprint">打印</span>
      </p>
  </div>
  <div class="banktitle">内容</div>
</div>
</body>
</html>
Happy_999
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript调用浏览器打印功能
WangyyyyI
07-10 5558
在今天的任务做到了一个打印功能，百度一下得到了解决，没有什么难度，写为博客记录一下。具体调试以后遇到再改变。<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>局部打印案例</title> <script type="t
javascript 实现打印,打印预览,打印设置
飞天小鱼
07-08 1500
 WebBrowser是IE内置的浏览器控件，无需用户下载.一、WebBrowser控件 　　 二、WebBrowder控件的方法 //打印 WebBrowser1.ExecWB(6,1); //打印设置 WebBrowser1.ExecWB(8,1); //打印预览 WebBrowser1.ExecWB(7,1); 关于这个组件还有其他的用法，列举如下： WebBrowser.ExecW
JS网页打印设置技巧(
weixin_34101229的博客
07-09 187
最近写一些东西需要提供网页打印功能，所以归纳总结了一下，本节主要讲述使用IE6支持打印功能，不同浏览器安全设置与支持有差异，如果不支持，请使用您的浏览器自带打印功能(或手动设置启用ActiveX控件)。书写有不足或描述不清的地方请大家指正。^-^利用CSS样式打印是经常使用的一种打印方法，利用它可以非常方便的实现打印页面中的指定内容和分页打印，下面将通过具体实例介绍如何利用CSS样式打印。［分析］...
Javascript window.print() 设置打印样式和内容
热门推荐
2019想做自己的游戏的人加群95303036
02-22 2万+
无标题文档 .printonly{ display:none } @media print{ input,.noprint{ display:none } .printonly{ display:block; width:50% } } /** .printonly{ display:none } 不能写到这里，会导致打印时printonly的内容也不显示 */
Vue2.js：前端在浏览器中网页表格打印的实现方案：window.print、print-js、iframe
彭世瑜的博客
10-13 4619
最近有一个需求，是让用户通过浏览器可以打印表格内容表格本身是使用了vue2.js + element-ui的el-table实现的，浏览器显示的时候很正常，没有什么异常。创建vue2项目 表格数据 data.js 界面显示 直接 打印效果不是很好。于是，开始寻找解决方案，大致有以下几种思路js打印页面 vue代码 打印预览 发现，直接打印是不行的当使用ctrl+p 拉起打印的时候，发现总有一些小问题，比如该方案适用于页面简单，打印效果过要求不高的场景我们可以通过css媒体查询，将打印按钮隐藏使用css媒体
JavaScript控制网页打印与打印设置
zhaoyongheng的博客
03-23 1436
控制网页打印一般有两套方案，一套是使用免费的ie默认打印，另一种是使用第三方开发的打印组件，下面介绍的是使用ie默认打印实现通过JavaScript代码控制打印。直接上代码，里面有解释： 第一段代码，使用css控制打印范围，默认的是打印所有网页的内容，如果一些内容不想被打印，可以通过加一个class=Noprint来实现&lt;style   media=print&gt;         .No...
JS 网页打印解决方案
老李 技术 专栏
08-27 1万+
这些日子真是太忙了，项目太多了公司总是加班，而且这些项目中好多都用到的打印，所以学习了一段时间js的打印。 其实原来只是用到了简单的功能，现在要深入的了解才发现原来ie的网页打印也是如此的强大。 以下是我在网上摘录的js打印方法。 Javascript网页打印大全 普
网页打印 javascript
12-29
在这个话题中，我们将深入探讨如何使用JavaScript进行网页打印，以及如何设置打印区域。 首先，JavaScript 提供了一种名为 `window.print()` 的内置方法，它会触发浏览器的打印对话框，让用户选择打印当前网页。...
JS 打印界面的CSS居中代码适用所有浏览器
12-07
总的来说，实现JS打印界面的CSS居中，关键在于理解JavaScript的HTML操作和CSS的布局技巧。通过`preview(oper)`函数处理打印范围，以及利用CSS的表格布局和相对/绝对定位实现垂直居中，我们可以为用户创建一个整洁、...
js+web调用打印机代码
08-27
js调用打印机代码,可以直接对网页进行打印预览，设置，打印
jquery实现通用网页打印
12-05
在网页开发中，jQuery是一个非常流行的JavaScript...通过合理利用这些技巧，你可以创建出符合业务需求、用户体验良好的网页打印功能。记得在实际项目中，根据具体需求进行调整和优化，以确保打印功能的稳定性和灵活性。
js设置IE浏览器打印页眉页脚为空和页边距（亲测可用）
qq_33252988的博客
02-22 2002
1、问题描述 项目中通过IE浏览器打印条形码的时候，出现样式偏差，原本应该在一行的换行了，通过调试发现是IE浏览器页边距设置问题，由于客户机器比较多不可能人工去一台一台设置，因此希望通过js设置页眉页脚和页边距。 2、解决方案 通过js直接修改IE浏览器页面设置。亲测可用 <!DOCTYPE html> <head> <meta charset="UTF-8"> <SCRIPT language=javascript> var HKEY_Root, H
JS 前端打印功能--原生写法（分页处理、样式调整、隐藏打印滚动条）
词不达意难知的博客
05-29 1593
JS 前端打印功能--原生写法
js控制打印
观千剑而后识器，操千曲而后晓声。
10-16 1615
打印分页"page-break-after:always">page1   "page-break-after:always">page2 设置打印"factory" style="display:none" viewastext    classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814"    codebase="http://www.
根据当前页码、总页数，设置页码并实现页码切换功能
羽筠的博客
10-13 5832
根据当前页码、总页数，设置页码并实现页码切换功能 AJAX获取列表数据时，前端根据当前页码、总页数设置页码选择元素，前后各显示5个页码，并实现页码切换功能 demo代码： 设置页码 .page_show{ padding: 40px 0; text-align: center;} .page_show span{ display: inline-block; hei
JS打印指定区域内容
潜伏在伤口的专栏
03-10 840
原文function preview(oper) { if (oper < 10) { bdhtml = window.document.body.innerHTML;//获取当前页的html代码 sprnstr = "<!--startprint"+oper+"-->";//设置打印开始区域 eprnstr = "<!--endprint
d3dcompiler_47.dll缺失的可能原因多种多样，那么d3dcompiler_47.dll缺失怎么修复
电脑修复君的博客
09-02 1150
在数字世界的深处，d3dcompiler_47.dll文件扮演着至关重要的角色，它是Direct3D编译器的一部分，负责处理图形渲染和游戏运行中的关键任务。然而，当用户启动某个程序或游戏时，屏幕上突然弹出的错误提示“d3dcompiler_47.dll缺失”无疑是一道令人沮丧的障碍。这个问题的出现，不仅打断了用户的娱乐或工作流程，还可能引发对系统稳定性的担忧。因此，了解并掌握修复这一问题的方法，对于确保计算机性能和用户体验的顺畅至关重要。
微软AD替代方案统一管理Windows和信创电脑的登录认证与网络准入认证
最新发布
yuzijiang11111的博客
09-02 587
宁盾国产化身份域管是以替换微软AD、IBM TDS为目标的信创方案，它不仅能高度兼容AD、TDS原有的目录结构，实现平滑无缝迁移，还对AD原先存在的一些不足进行了能力增强，如MFA 多因素认证、自助修改密码、单点登录SSO、云上应用对接等能力，使得金融、央国企等信创用户在进行国产化改造时，能够实现对异构化的IT资产进行统一管理的目标。那么在采购了国产化的操作系统电脑、服务器、云桌面、邮箱后，如何再用微软AD国产化替换方案进行统一管理，以确保员工的使用习惯不改变，业务不中断？
JS实现分页打印：保留表头和表尾的技巧
"JS分页打印技术允许在打印网页时保留表头和表尾，确保多页打印时数据的一致性和可读性。通过特定的CSS样式和JavaScript代码，可以实现这一功能。以下是一个简单的示例，展示了如何使用JS进行分页打印并保持表头的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值