JS打印组合功能_javascript技巧

本文为大家分享了JS打印组合功能,功能全面,供大家参考,具体内容如下

1.局部打印--即想打印什么地方就打印什么地方
 解决办法:
 将不想打印的地方隐藏起来
 <style type="text/css" media=print>
.noprint{display : none } 

分页的时候用 
.PageNext{page-break-after: always;} 
然后给不想打印的页面元素添加: class="Noprint" ,那就不会出现在打印和打印预览中了。
想分页的地方添加:  <div class="PageNext"></div> 就可以了。
</style>
在将不想打印的地方控制起来 
<p class="noprint">不需要打印的地方</p> 

2.引用组建
WebBrowser是IE内置的浏览器控件,无需用户下载. 
WebBrowser控件
<object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>

关于这个组件的用法,列举如下:
WebBrowser.ExecWB(1,1) 打开
Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口
Web.ExecWB(4,1) 保存网页
Web.ExecWB(6,1) 打印
Web.ExecWB(7,1) 打印预览
Web.ExecWB(8,1) 打印页面设置
Web.ExecWB(10,1) 查看页面属性
Web.ExecWB(15,1) 好像是撤销,有待确认
Web.ExecWB(17,1) 全选
Web.ExecWB(22,1) 刷新
Web.ExecWB(45,1) 关闭窗体无提示

3.实例

 <head>
<script language="javascript">
<style type="text/css" media=print>
.noprint{display : none }
</style>
function printsetup()
{
 // 打印页面设置
  wb.execwb(8,1);
}
function printpreview(){
// 打印页面预览
wb.execwb(7,1);
}
function printit()
{
 if(confirm('确定打印吗?'))
 {
  wb.execwb(6,6)
 }
}
</script>
</head>
<body>
<p class="noprint">
<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" id="wb" name="wb" width="0"></OBJECT>
<input type="button" name="button_print" value="打印" onclick="javascript:printit()" />
<input type="button" name="button_setup" value="打印页面设置" onclick="javascript:printsetup();" />
<input type="button" name="button_show" value="打印预览" onclick="javascript:printpreview();" />
</p>
</body> 

3.JS 实现简单的页面局部打印

function preview(oper)
{
 if (oper < 10){
 bdhtml=window.document.body.innerHTML;//获取当前页的html代码
 sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
 eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取htm
 prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
 window.document.body.innerHTML=prnhtml;
 window.print();
 window.document.body.innerHTML=bdhtml;
}
else {
  window.print();
  }
}

使用很简单 将页面内要打印的内容加入中间<!--startprint1-->XXXXX<!--endprint1-->
再加个打印按纽 onclick=preview(1)

 4、控制"纵打"、 横打”和“页面的边距。
(1)<script defer>

function SetPrintSettings() {
 // -- advanced features
 factory.printing.SetMarginMeasure(2) // measure margins in inches
 factory.SetPageRange(false, 1, 3) // need pages from 1 to 3
 factory.printing.printer = "HP DeskJet 870C"
 factory.printing.copies = 2
 factory.printing.collate = true
 factory.printing.paperSize = "A4"
 factory.printing.paperSource = "Manual feed" 

 // -- basic features
 factory.printing.header = "This is MeadCo"
 factory.printing.footer = "Advanced Printing by ScriptX"
 factory.printing.portrait = false
 factory.printing.leftMargin = 1.0
 factory.printing.topMargin = 1.0
 factory.printing.rightMargin = 1.0
 factory.printing.bottomMargin = 1.0
}
</script> 

function preview(oper)
{
 if (oper < 10){
 bdhtml=window.document.body.innerHTML;//获取当前页的html代码
 sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
 eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取htm
 prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
 window.document.body.innerHTML=prnhtml;
 window.print();
 window.document.body.innerHTML=bdhtml;
}
else {
  window.print();
  }
}

使用很简单 将页面内要打印的内容加入中间<!--startprint1-->XXXXX<!--endprint1-->
再加个打印按纽 onclick=preview(1) 

更多关于js打印功能的内容,点击《js打印功能汇总》专题学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
打印
javascript打印功能、javascript技巧、javascript组合模式、javascript 排列组合、javascript高级技巧,以便于您获取更多的相关知识。

时间: 2024-09-11 07:49:07

JS打印组合功能_javascript技巧的相关文章

简单实现js页面切换功能_javascript技巧

本文为大家介绍了js页面换肤功能处理原理  (*需要在有服务器环境下测试使用*),供大家参考,具体内容如下 原理: 1.换肤是让页面采用不用的样式设置 2.我们把要换肤的地方根据不用皮肤做成多个样式表文件 3.获取link的id 4.修改link的href属性改变样式表 5.采用了不用样式表,就是使用对应皮肤样式 6.利用cookie技术用户原则,用户再次打开页面也会采用上次选用皮肤 7.读取cookie要在页面载入开始,保证对应皮肤css提前加载 <html> <head> &l

php+js实现倒计时功能_javascript技巧

js部分 复制代码 代码如下: setInterval("time_controller()",1000);function time_controller(){    $(".time_val").each(function(){         var time_id = "time_show_"+$(this).attr('for');         var time_val= $(this).attr('value');        

js如何打印object对象_javascript技巧

js调试中经常会碰到输出的内容是对象而无法打印的时候,光靠alert只能打印出object标示,却不能打印出来里面的内容,甚是不方便,于是各方面整理总结了如下一个函数,能够将数组或者对象这类的结果一一打印出来,具体代码如下: function writeObj(obj){ var description = ""; for(var i in obj){ var property=obj[i]; description+=i+" = "+property+"

js实现网页收藏功能_javascript技巧

本文实例讲述了js实现动态添加或删除网址功能的方法.分享给大家供大家参考,具体如下: 运行效果图: 具体代码如下 <html> <head> <title></title> <meta charset="utf-8"> <script> function add(){ var name = document.getElementById("name").value; var url = docu

Three.js快速入门教程_javascript技巧

引言 本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解. 近年来web得到了快速的发展.随着HTML5的普及,网页的表现能力越来越强大.网页上已经可以做出很多复杂的动画,精美的效果. 但是,人总是贪的.那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形. OpenGL,WebGL到Three.js OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于OpenGL设计的面向web的图形标准,

常用原生js自定义函数总结_javascript技巧

js获取日期函数 //获取当前时间日期 function CurentTime() { var now = new Date(); var year = now.getFullYear(); //年 var month = now.getMonth() + 1; //月 var day = now.getDate(); //日 var hh = now.getHours(); //时 var mm = now.getMinutes(); //分 var clock = year + "-&quo

利用JS实现数字增长_javascript技巧

上次在项目中碰到要实现数字增长的效果,实现数字从0到目标数的增长,来看看效果图 现在把它扩展开来可以实现不同效果 主要思路就两部分     1.每隔三个数字之间加上,     2.实现动起来 对于1使用正则来完成十分的方便 this.fomatNum = function(num) { var str = num.toFixed(this.option.decimal);//精确到小数位数多少位 var num1, x1, x2, reg; arr = str.split(".");

Lab.js初次使用笔记_javascript技巧

动态加载JS函数 一般性的,当我们需要加载js文件的时候都会使用script标签来实现,类似于如下代码: 复制代码 代码如下: <script type="text/javascript" src="example.js"></script> 但是直接使用script标签来加载js文件会有如下一些缺点: 1.严格的读取顺序.由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,导致在多个文件

易被忽视的js事件问题总结_javascript技巧

一.跨平台事件 什么叫跨平台事件?即在不同的浏览器上执行同一事件,所使用的方法不同. 什么是EventUtil对象?有什么作用?即将所有与事件相关的函数,融合在一起的一个容器,方便管理事件对象,它没有属性.主要处理DOM事件和IE事件的磨合,使其尽可能的相似. 下面我们来看一下DOM和IE之间的对象属性和方法做个对比(这里只指出两者之间不同的属性和方法),主要有以下五大点:DOM属性和方法   IE属性和方法 charcode               keycode preventDefau