快捷導(dǎo)航

JS實現(xiàn)頁面打印（整體、局部）

更新時間：2017年08月18日 10:08:16 作者：小果子_G

本篇文章主要介紹了JS實現(xiàn)頁面打印（整體、局部），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

我們在網(wǎng)頁開發(fā)過程中經(jīng)常會有打印頁面的需求，通過JS來實現(xiàn)的方法有很多，這里我做了一個整理，供大家參考。

方式一：window.print()

整體打印

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

現(xiàn)在就輕松實現(xiàn)了頁面的打印，但是這種方式會將整個頁面打印，如果想要實現(xiàn)指定區(qū)域的打印需要通過下面的設(shè)置

局部打印

首先，在html中，通過star和end來標(biāo)記打印區(qū)域

<h1>這塊內(nèi)容不需要打印</h1>
<!--startprint-->
<div class="content">
  這里是需要打印的內(nèi)容
    .....
</div>
<!--endprint-->
<h1>這塊內(nèi)容不需要打印</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();   
}

過濾打印區(qū)域的內(nèi)容

例如

<!--startprint-->
<div class="content">
  <button class="noprint">預(yù)覽</button>
  <button class="noprint">打印</button>
   這里是需要打印的內(nèi)容
    .....
  </div>
<!--endprint-->

上面的預(yù)覽和打印按鈕不希望打印，如果要過濾的話可以做下面的樣式設(shè)置

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

or

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

兩種寫法任選其一

分頁打印

使用 window.print() 打印時，如果內(nèi)容超出會自動分頁。但是我們?nèi)绻枰远x分頁范圍，如碰到表格分頁打印，可以通過進(jìn)行如下設(shè)置：

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

方式二、jqprint()

jqprint是一個基于jQuery編寫的頁面打印的一個小插件，但是不得不承認(rèn)這個插件確實很厲害，最近的項目中幫了我的大忙，在Web打印的方面，前端的打印基本是靠window.print()的方式進(jìn)行打印的，而這個插件在其基礎(chǔ)上進(jìn)行了進(jìn)一步的封裝，可以輕松實現(xiàn)打印網(wǎng)頁上的某個區(qū)域，這是個亮點。

參考網(wǎng)址：http://www.dbjr.com.cn/article/102230.htm

請注意!很多朋友遇到 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>

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="打印"/>

設(shè)置模板打印

$("#printContainer").jqprint({
   debug: false, //如果是true則可以顯示iframe查看效果（iframe默認(rèn)高和寬都很小，可以再源碼中調(diào)大），默認(rèn)是false
   importCSS: true, //true表示引進(jìn)原來的頁面的css，默認(rèn)是true。（如果是true，先會找$("link[media=print]")，若沒有會去找$("link")中的css文件）
   printContainer: true, //表示如果原來選擇的對象必須被納入打?。ㄗ⒁猓涸O(shè)置為false可能會打破你的CSS規(guī)則）。
   operaSupport: true//表示如果插件也必須支持歌opera瀏覽器，在這種情況下，它提供了建立一個臨時的打印選項卡。默認(rèn)是true
});

附言

另外還可以使用html 標(biāo)簽<object>引入Webbrowser控件（只兼容IE）或者調(diào)用windows底層打印，報安全警告，不建議使用（不支持局部打?。?br />

這里只介紹兩種方式，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: