js利用window.print實現局部打印方法

時間 2019-12-08

標籤利用 window.print window print 實現局部打印方法欄目 JavaScript 简体版

原文原文鏈接

1、局部打印，打印單獨的一部份內容css

方法：爲要打印的內容設置單獨的id名，新開窗口並打印。html

舉例以下：ide

一、html函數

<div id="pulPrint">  
  我是要打印的內容
</div>
<div class="btn btn-primary print-btn">打印</div>

二、jsthis

$(".print-btn").on("click",function(){
    printsingle("pulPrint");    
})
//局部打印   這裏的printpage是id
function printsingle(printpage){
    var headstr="<html><head><title></title></head><body>";
    var footstr="</body></html>";
    var newstr=document.all.item(printpage).innerHTML;   
    var oldstr=document.body.innerHTML;
    var myWindow=window.open('','newwindow','fullscreen=yes,location=no,menubar=no,status=no,titlebar=no,toolbar=no');
    myWindow.document.body.innerHTML=headstr+newstr+footstr; 
　　myWindow.print();
    setTimeout(function(){
        myWindow.close();
    },300);
    return false;
}

2、選中多塊區域並打印，舉例以下spa

1.html.net

<div class="wrap">  
  <!-- <div id="pulPrint">我是單個打印</div> -->
  我是wrap
  <div class="print-item">
      <p>打印部分一</p>
      <div>
        <strong>粗體</strong>
        <a href="http://www.cnblogs.com/kangby/">個人博客連接</a>
      </div>
  </div>
  <p>普通訊息，不打印</p>
  <div class="print-item">
    <p>打印部分二</p>
  </div>
   <p>啦啦啦~~，不打印，我是搗亂的~</p>
</div>

2.jsssr

$(".print-btn").on("click",function(){
    var printVal='';
    $(".print-item").each(function(){
        printVal +=$(this).html();  
    });
    if(printVal==""){
      swal("請勾選您要打印的內容");
    }else{
      pulsePrint(printVal);
    }
})
//這裏的printmsg獲取的是html內容，注意打印頁面樣式調整是在<style></style>中進行
function pulsePrint(printmsg){
    var headstr="<html><head><title></title></head><style>.print-item{display:block;font-size:20px;margin-top:30px;}</style><body>";
    var footstr="</body></html>";
    var newstr=printmsg;   
    var oldstr=document.body.innerHTML;
    var myWindow=window.open('','newwindow','fullscreen=yes,location=no,menubar=no,status=no,titlebar=no,toolbar=no');
    myWindow.document.body.innerHTML=headstr+newstr+footstr; 
　　myWindow.print();
    setTimeout(function(){
        myWindow.close();
    },300);
    return false;
}

3、打印強制分頁，本身設定到某個地方打印的時候直接分頁code

利用 csshtm

{ page-break-after: always; /*在元素後插入分頁符。*/ }
{ page-break-before: always; /*在元素前插入分頁符。*/ }

舉例以下：

1.直接在html頁經過行內樣式設置,js不變

<!--直接在上面第二個案例的html中修改，js不變，給div加了style="page-break-before:always;"-->
<div class="wrap">  
  我是wrap
  <div class="print-item">
      <p>打印部分一</p>
      <div style="page-break-before:always;">
        <strong>粗體</strong>
        <a href="http://www.cnblogs.com/kangby/">個人博客連接</a>
      </div>
  </div>
</div>

2.js中 headstr變量中的<style></style>中加了一個class名，html直接引用改class名。(注意：要在打印頁面寫入該class樣式)

(1)、html，仍然在案例二代碼基礎上修改

<div class="wrap">  
  我是wrap
  <div class="print-item">
      <p>打印部分一</p>
      <div class="pageBreak">
        <strong>粗體</strong>
        <a href="http://www.cnblogs.com/kangby/">個人博客連接</a>
      </div>
  </div>
</div>

(2)、js，案例二代碼上修改，點擊事件不變，只是在函數內加了一個class 的樣式

//這裏的printmsg獲取的是html內容，注意打印頁面樣式調整是在<style></style>中進行
function pulsePrint(printmsg){
    var headstr="<html><head><title></title></head><style>.print-item{display:block;font-size:20px;margin-top:30px;}.pageBreak{page-break-before: always;}</style><body>";
    var footstr="</body></html>";
    var newstr=printmsg;   
    var oldstr=document.body.innerHTML;
    var myWindow=window.open('','newwindow','fullscreen=yes,location=no,menubar=no,status=no,titlebar=no,toolbar=no');
    myWindow.document.body.innerHTML=headstr+newstr+footstr; 
　　myWindow.print();
    setTimeout(function(){
        myWindow.close();
    },300);
    return false;
}

關於打印的css詳情，可參考 CSS 打印屬性（Print）

4、window.print()圖片打印

一、html中的圖片地址要注意路徑問題，最好是絕對路徑，舉例以下

<div class="print-item">
      <p>打印部分一</p>
      <div class="pageBreak">
        <strong>粗體</strong>
        <img src="file:///D:/text/img/logo.png" alt="">
        <a href="http://www.cnblogs.com/kangby/">個人博客連接</a>
      </div>
 </div>

View Code

二、js 中打印時要注意圖片的加載問題

若是新窗口的內容中存在圖片而打印中圖片未出來時，說明圖片路徑已是正確的，要判斷圖片加載。

額，下面是一個偷懶的小辦法，其餘的可自行百度或者參考下面的連接

//在案例二js代碼基礎上改動
//當打印內容中只有一張圖片或者最後一張圖片最大的時候能夠用用，具體狀況自行分析使用
function pulsePrint(printmsg){
    var headstr="<html><head><title></title></head><style>.print-item{display:block;font-size:20px;margin-top:30px;}</style><body>";
    var footstr="</body></html>";
    var newstr=printmsg;   
    var oldstr=document.body.innerHTML;
    var myWindow=window.open('','newwindow','fullscreen=yes,location=no,menubar=no,status=no,titlebar=no,toolbar=no');    myWindow.document.body.innerHTML=headstr+newstr+footstr; 
    var imgNum = myWindow.document.getElementsByTagName("img").length;
    if(imgNum>0){
      myWindow.document.getElementsByTagName("img")[imgNum -1].onload = function(){
        setTimeout(function(){
          myWindow.print();
        },300);
        setTimeout(function(){
          myWindow.close();
        },600);
      }
    }else{
      myWindow.print();
      setTimeout(function(){
        myWindow.close();
      },300);
    }
    return false;
}