我们在网页开发过程中经常会有打印页面的需求，通过JS来实现的方法有很多，下面我们看一下JavaScript中通过window.print()方法与jqprint()插件打印页面的方法。

方式一：window.print()

整体打印

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

现在就轻松实现了页面的打印，但是这种方式会将整个页面打印，如果想要实现指定区域的打印需要通过下面的设置

局部打印

首先，在html中，通过star和end来标记打印区域

<h1>这块内容不需要打印</h1>
<!--startprint-->
<div>
  这里是需要打印的内容
    .....
</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>
  <button>预览</button>
  <button>打印</button>
   这里是需要打印的内容
    .....
  </div>
<!--endprint-->

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

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

或：

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

分页打印

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

<table width="100%" border="0" cellpadding="0" cellspacing="0" > 
</table>

方式二、jqprint()

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

引入

<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script language="javascript" src="jquery.jqprint-0.3.js"></script>

js

<script language="javascript">
function a(){
    $("#ddd").jqprint();
  }
</script>

html

<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底层打印，报安全警告，不建议使用（不支持局部打印）

链接: https://fly63.com/article/detial/7856