如何在打印頁面上隱藏打印按鈕和其他內容

-1

我想在打印頁面時隱藏打印按鈕和一些文本。我有以下文件：如何在打印頁面上隱藏打印按鈕和其他內容

的test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head> 
<body> 
    <div id="wrapper" class="estimated-fleet-page"> 
     <div id="container"> 
      <h2>Summary Report</h2> 

      <div id="button-container"> 
       <a href="#" id="PrintDiv" class="btn btn-success btn-primary"><span class="glyphicon glyphicon-print" aria-hidden="true"></span>Print</a> 
      </div> 
      <table> 
       <tr> 
       <th>Company</th> 
       <th>Contact</th> 
       <th>Country</th> 
      </tr> 
      <tr> 
       <td>Alfreds Futterkiste</td> 
       <td>Maria Anders</td> 
       <td>Germany</td> 
      </tr> 
      <tr> 
       <td>Centro comercial Moctezuma</td> 
       <td>Francisco Chang</td> 
       <td>Mexico</td> 
      </tr> 
      <tr> 
       <td>Ernst Handel</td> 
       <td>Roland Mendel</td> 
       <td>Austria</td> 
      </tr> 
     </table> 
    </div> 
</div> 
</body> 
</html>

的style.css

table { 
    font-family: arial, sans-serif; 
    border-collapse: collapse; 
    width: 100%; 
} 

td, th { 
    border: 1px solid #dddddd; 
    text-align: left; 
    padding: 8px; 
} 

tr:nth-child(even) { 
    background-color: #dddddd; 
}

JS部分

$('#PrintDiv').click(function(){ 
    var contents = document.getElementById("wrapper").innerHTML; 
    var frame1 = document.createElement('iframe'); 
    frame1.name = "frame1"; 
    frame1.style.position = "absolute"; 
    frame1.style.top = "-1000000px"; 
    document.body.appendChild(frame1); 
    var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument; 
    frameDoc.document.open(); 
    frameDoc.document.write('<html><head><title></title>'); 
    frameDoc.document.write('</head><body>'); 
    frameDoc.document.write(contents); 
    frameDoc.document.write('</body></html>'); 
    frameDoc.document.close(); 
    setTimeout(function() { 
     window.frames["frame1"].focus(); 
     window.frames["frame1"].print(); 
     document.body.removeChild(frame1); 
    }, 500); 
    return false; 
})

輸出：

如何刪除上方圖片的「摘要報告」上方的打印按鈕和內容。

我已經在jsfiddle中發佈了這個問題。

https://jsfiddle.net/zan/b780Lcte/2/

謝謝

來源

2017-02-14 nas

結帳這樣的：https://www.tutorialspoint.com/css/css_printing.htm –

使用打印樣式表，並隱藏需要的元素在裏面 –

@nas，你爲什麼要問你的問題兩次？ – DomeTune

與jquery點擊的時候可以隱藏打印按鈕，並與印刷展後回：

$('#PrintDiv').click(function(){ 
$(this).hide(); 
     var contents = document.getElementById("wrapper").innerHTML; 
     var frame1 = document.createElement('iframe'); 
     frame1.name = "frame1"; 
     frame1.style.position = "absolute"; 
     frame1.style.top = "-1000000px"; 
     document.body.appendChild(frame1); 
     var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument; 
     frameDoc.document.open(); 
     frameDoc.document.write('<html><head><title></title>'); 
     frameDoc.document.write('</head><body>'); 
     frameDoc.document.write(contents); 
     frameDoc.document.write('</body></html>'); 
     frameDoc.document.close(); 
     setTimeout(function() { 
     $('#PrintDiv').show(); 
      window.frames["frame1"].focus(); 
      window.frames["frame1"].print(); 
      document.body.removeChild(frame1); 
     }, 500); 
     return false; 
})

fiddle

來源

2017-02-14 14:55:38

只需添加隱藏（）函數。

$('#PrintDiv').click(function(){ 
     $(this).hide();

來源

2017-02-14 14:49:48 Parithiban

是的，我已經嘗試過，但沒有工作。檢查jsfiddle – nas

也許你可以試試document.getElementById("print").style.display = 'none';

來源

2017-02-14 14:51:09

沒有這個不工作 – nas

哦，對不起，希望你能解決它：D –

你似乎使用引導。你嘗試過使用助手類嗎？ http://getbootstrap.com/css/#responsive-utilities-print

<div id="button-container" class="hidden-print"> 
    <a href="#" id="PrintDiv" class="btn btn-success btn-primary"><span class="glyphicon glyphicon-print" aria-hidden="true"></span>Print</a> 
</div>

打印

時更新了小提琴的hidden-print CSS類應隱藏容器： https://jsfiddle.net/b780Lcte/9/

沒有引導你可以創建自己的類：

@media print { 
    .hidden-print { 
    display:none; 
    } 
}

中當然你必須使用window.print()函數讓它解釋CSS樣式表。

來源

2017-02-14 14:51:26

你打開了小提琴嗎？ –

編輯小提琴 –

更改您的打印功能：

window.print();

添加下面的CSS ：

@media print { 
    #button-container { 
     display : none !important; 
    } 
}

來源

2017-02-14 14:59:46 ulysses

通過媒體查詢，您可以在打印頁面時添加css規則，例如display:none;。

@media print { 
 
    /* All your print styles go here */ 
 

 
    #PrintDiv{ 
 
     display:none !important; 
 
    } 
 
}

這樣一來，你也可以隱藏在網頁的橫幅或刪除背景，使文本顏色爲黑色或這樣的事情。 請注意，更改在瀏覽器內不可見：它們僅在您的頁面正在打印時有效。如果你想看看它的樣子，而不真的打印你的頁面，更簡單的方法是點擊你的打印按鈕或點擊谷歌瀏覽器中的Ctrl+P，因爲它們爲你提供了即將展示的內容。

祝你好運;）

來源

2017-02-14 15:02:35

這裏是一個CSS來實現你想要做什麼（隱藏打印按鈕和打印頁面上的任何其他內容）

請新增無打印類的任何元素你想隱藏在打印頁面上。

@media print { 
    .no-print 
    { 
     display: none !important; 
    } 
}

來源

2017-02-14 15:03:37 user7421148

如何在打印頁面上隱藏打印按鈕和其他內容

回答

相關問題