方式一:window.print()
整体打印

<a href="javascrīpt:window.print()" target="_self">打印</a>

现在就轻松实现了页面的打印,但是这种方式会将整个页面打印,如果想要实现指定区域的打印需要通过下面的设置
局部打印
首先,在html中,通过star和end来标记打印区域

<h1>这块内容不需要打印</h1>
<!--startprint-->
<div class="content">
    这里是需要打印的内容
        .....
</div>
<!--endprint-->
<h1>这块内容不需要打印</h1>

然后,在点击事件中添加如下代码

function doPrint() {      
        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();      
}

过滤打印区域的内容
例如

<!--startprint-->
<div class="content">
    <button class="noprint">预览</button>
    <button class="noprint">打印</button>
      这里是需要打印的内容
        .....
    </div>
<!--endprint-->

上面的预览和打印按钮不希望打印,如果要过滤的话可以做下面的样式设置

        <style type="text/css">
            @media print {
                .noprint{
                    display: none;
                }
            }
        </style>
or

        <style type="text/css" media="print">
            .noprint{
                display: none;
            }
        </style>

两种写法任选其一

分页打印
使用 window.print() 打印时,如果内容超出会自动分页。但是我们如果需要自定义分页范围,如碰到表格分页打印,可以进行如下设置:

<table width="100%"  border="0" cellpadding="0" cellspacing="0"  style="page-break-after:always" > 
</table>

方式二、jqprint()
jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠window.print()的方式进行打印的,而这个插件在其基础上进行了进一步的封装,可以轻松实现打印网页上的某个区域,这是个亮点。

请注意!很多朋友遇到 Cannot read property 'opera' of undefined 错误问题是juqery版本兼容问题
解决方法:加入迁移辅助插件 jquery-migrate-1.0.0.js可解决版本问题

引入

<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script language="javascript" src="jquery.jqprint-0.3.js"></script>
<script language="javascript">
function  a(){
        $("#ddd").jqprint();
    }
</script>
<div id="ddd">
    <table>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
    </table>
</div>
<input type="button" onclick=" a()" value="打印"/>

设置模板打印

$("#printContainer").jqprint({
     debug: false, //如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false
     importCSS: true, //true表示引进原来的页面的css,默认是true。(如果是true,先会找$("link[media=print]"),若没有会去找$("link")中的css文件)
     printContainer: true, //表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。
     operaSupport: true//表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true
});

附言
另外还可以使用html 标签<object>引入Webbrowser控件(只兼容IE)或者调用windows底层打印,报安全警告,不建议使用(不支持局部打印)
用户在打印网页的时候,页面上会出现网页的名字,页码,链接地址和打印时间,如果用户不需要这些信息,则需要设置用户的网页设置:
具体如下:文件-》页面设置-》将页眉页脚中的代码删除即可。打印出来的文档没有页码信息和链接地址信息
附件为用到的js文件下载。
jquery.jqprint-0.3.js
jquery-2.1.4.min.js
jquery-migrate-1.2.1.min.js

javascripts.zip

带符号 * 的表示必填项