JavaScript+CSS控制打印格式示例介绍

1. 用media="print"的css来控制要打印的文件testPrint.html中引用media为print的样式，表示打印时该样式才起作用


代码如下:

<link href="/style/print.css" rel="stylesheet" type="text/css" media="print">

/style/print.css文件


代码如下:

.noprint{display:none;}

在testPrint.html中使用print.css中的样式，在网页浏览的时候是看不出效果的，但是打印的时候会起作用，如下面这一段，加上noprint之后，在浏览器中仍然是现实的，但是打印的时候不显示：


代码如下:

<div class="noprint">
<input type="button" onclick="window.print();" value="打印本页" />
</div>

当然print.css里面的样式你可以随便写，改颜色啊（彩色的图像在黑白打印机下效果不好，可以用另一种样式打印），字体什么的都可以，随便发挥-----------------------------------------------------------------

2. 用JavaScript来控制

因为这样那样的原因，可能有的人css不太熟练，有的人JavaScript比较牛x，有时候JavaScript也是不错的选择


代码如下:

<script type="text/javascript">
<!--
//自动在打印之前执行
window.onbeforeprint = function(){
$("#test").hide();
}

//自动在打印之后执行
window.onafterprint = function(){
$("#test").show();
}
//-->
</script>

<div id="test">这段文字不会被打印出来</div>

打印之前，会调用window.onbeforeprint函数，这时你可以随意发挥，用你的聪明才智给html重新构造一边，然后打印。当然打印之后一般还要弄回来，就是window.onafterprint函数了

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

小技巧：注意一点，打印我们都知道是window.print()，其实也可以打印框架的，如window.top.centerFrame.MainFrame.print();

赞 (0)

相关推荐

  • JavaScript调用浏览器打印功能实例分析

    本文实例讲述了JavaScript调用浏览器打印功能的方法.分享给大家供大家参考.具体如下: 1. 通用型,支持IE,Firefox,Chrome... 复制代码 代码如下: window.print(); 2. 只支持IE打印: <script> var print=function(){ /** * WebBrowser.ExecWB(1,1) 打开 * Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口 * Web.ExecWB(4,1) 保存网页 * Web.Ex

  • Javascript打印网页部分内容的脚本

    正常情况下的打印是使用 window.print(); 直接整页打印,但如果需要打印网页中定义的部分内容,则可使用如下的方法: 1.在页面的代码头部处加入JavaScript: JavaScript代码 复制代码 代码如下: <script language=javascript> function doPrint() { bdhtml=window.document.body.innerHTML; sprnstr="<!--startprint-->"; ep

  • javascript 局部页面打印实现代码

    javascript 局部页面打印实现代码

    ie自带的有Active控件,但火狐不支持.这里使用的是js操作dom方法对窗体指定标记内文字进行打印,所以使用时需要定义相关的标签及其样式(文字大小.字体之类). 复制代码 代码如下: <script type="text/javascript"> ///*********************** ///打印指定区域页面 ///说明:obj–通过getElementById或其它方式获取标签标识,打印此obj内的文字 ///日期:2009-8-7 function s

  • javascript 打印页面代码

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>javascript打印页面</title> <script type="text/javascript"><!-- function fPrint(){ //隐藏不需要打印的内容. document.getElementById("divOperate

  • 用javascript实现页面打印的三种方法

    前一段时间听朋友说起过打印网页的一些方法,在安静的夜晚,听着歌曲无意间发现了几段代码,帖出来跟大家分享一下. 因为我从来没有打印过网页,而且也没有打印机,具体的效果也不是很清楚,测试打印成PDF是正常的,就第二种在弹出设置窗口比第一跟第三种方法多了点. 注意:第二种方法的控件需要IE5.5+的支持,而且因为使用了控件,如果客户端IE的安全性设置过高,将无法正常运行.  特别提示  运行本例代码,如果已经安装了打印机,将直接调用打印机打印页面,否则提示安装打印机. 1.用window对象的prin

  • JavaScript 实现網頁打印處理

    1.控制"纵打". 横打"和"页面的边距.  (1)<script defer>  function SetPrintSettings() { factory.printing.SetMarginMeasure(2) // measure margins in inches  factory.SetPageRange(false, 1, 3) // need pages from 1 to 3  factory.printing.printer = &q

  • javascript 打印内容方法小结

    一般打印就用window.print();就OK了 但是一般都是选择性打印所以会调用方法: 复制代码 代码如下: function preview() { bdhtml=window.document.body.innerHTML; sprnstr="<!--startprint-->"; eprnstr="<!--endprint-->"; prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);

  • javascript下用ActiveXObject控件替换word书签，将内容导出到word后打印第1/2页

    最近有需求将数据导出到word里,然后编辑打印. 想过几种方案: 1.使用jacob. 2.使用apache的poi. 3.使用itext. 由于时间比较紧,没多的时候去学习研究上述工具包,现在用javascript操作ActiveXObject控件,用替换word模板中的书签方式解决. 前提条件: 1.浏览器安全级别降低,可以使用ActiveXObject控件. 2.装有office word. 目前实现了替换单个书签,多行表格书签,和图片,基本上满足需求.不过还有很多操作word的使用方法不

  • JavaScript 实现打印,打印预览,打印设置

    WebBrowser是IE内置的浏览器控件,无需用户下载. 一.WebBrowser控件 <object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object> 二.WebBrowder控件的方法 //打印 WebBrowser1.ExecWB(6,1); //打印设置 WebBrowser1.ExecWB(8,1); //打印预览 WebBrow

  • javascript检查浏览器是否已经启用XX功能

    检测浏览器是否支持cookie功能 <script> if(navigator.cookieEnabled) { document.write("你的浏览器支持cookie功能!"); } else{ document.write("你的浏览器不支持cookie!"); } </script> 检查浏览器是否已经启用Java支持功能 <script type="text/javascript"> documen

随机推荐