JS頁面打印


  平常瀏覽網頁和文檔的時候,隨處可見打印兩個字,有時候不小心點到或者快捷鍵觸發到,就會彈出一個打印的頁面,上邊顯示的打印機是GoldGrid Virtual Printer,這是計算機的虛擬打印機,打印后就會生成類似掃描件的pdf文檔。當然如果連接了打印機並設置好,可以直接調用到打印機進行真實的打印。

  接下來要介紹的是js端進行的一些打印操作:

1.直接調用window的print方法進行打印,效果同直接點擊打印,會將整個頁面進行打印;

2.局部打印:

頁面如下

<h1>不需要打印</h1>
<!--printstart-->
<div>
  這里是需要打印的內容
    .....
</div>
<!--printend-->
<h1>不需要打印</h1>

js如下

1 function doPrint() {   
2     var bdhtml=window.document.body.innerHTML;   
3     var printstart="<!--printstart-->";   
4     var printend="<!--printend-->";   
5     prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17 ,bdhtml.indexOf(eprnstr));   
6     window.document.body.innerHTML=prnhtml;  
7     window.print();   
8 }

原理就是將不需要打印的內容手動去除,然后調用window的打印方法打印。

3.過濾打印,與2類似,將不需要打印的內容進行隱藏,如:

<style type="text/css">
  @media print {
    .noprint{
      display: none;
    }
  }
</style>
<style type= "text/css" media= "print" >
   .noprint{
     display : none ;
   }
</style>
<!--startprint-->
<div class="content">
  <button class="noprint">預覽</button>
  <button class="noprint">打印</button>
   這里是需要打印的內容
    .....
  </div>
<!--endprint-->

4.使用jqprint進行打印

下載引入jqprint后,使用時直接

$("#ddd").jqprint();

就可以,打印該id元素內的內容,很容易理解。

該方法的參數是一個對象

{
  debug: false ,
  importCSS: true ,
  printContainer: true ,
  operaSupport: false
  }

  1) debug: false,          //如果是true則可以顯示iframe查看效果(iframe默認高和寬都很小,可以再源碼中調大),默認是false  

  2) importCSS: true,       //true表示引進原來的頁面的css,默認是true。(如果是true,先會找$("link[media=print]"),若沒有會去找$("link")中的css文件)  

  3) printContainer: true,  //表示如果原來選擇的對象必須被納入打印(注意:設置為false可能會打破你的CSS規則)。  

  4) operaSupport: false    //表示如果插件也必須支持谷歌opera瀏覽器,在這種情況下,它提供了建立一個臨時的打印選項卡。默認是true


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM