打印的<c:foreach>每個迴路單獨使用javascript

目前我打印的整個頁面，使用下面的代碼打印圖標：打印的<c:foreach>每個迴路單獨使用javascript

<a href="javascript:window.print()"> 
<img src="images/printIcon.gif" alt="Print the Records" width="40" height="40" border="0" /> 
</a>

我讀的對象在JSP列表並使用<c:foreach>顯示對象的詳細信息。我想在每個對象的詳細信息旁邊顯示一個打印圖標，並在單擊對象時僅打印（向外部打印機）單個對象的詳細信息。整個頁面是單獨的div。

我不確定這是否可以完成。我可以使用某種類型的ID來控制每個循環嗎？

編輯：

例子：

<c:forEach var="case" items="${distributions}"> 
    <table> 
     <tr> 
      Print case details 
     </tr> 
    </table> 
    </c:foreach>

如果我有10點分佈，我得到10桌所以希望每個餐桌旁的打印圖標，並在其上單擊時，只打印單個表。

來源

2013-03-07 Naveen

不知道你在這裏問什麼。 – gdoron 2013-03-07 22:06:51

也許是一個JS在打印之前觸發期望對象的可見性？ – jtheman 2013-03-07 22:08:14

你能提出你的的代碼嗎？ – 2013-03-07 22:08:23

在您的塊中，您可以將數據放入td中，然後使用this post中描述的方法打印該td的內容。

<script type="text/javascript"> 
$(function(){ 
$(".printable").each(function(){ 
    var $td = $(this); 
    var $printIconTD = $('<td><img src="images/printIcon.gif" alt="Print the Records" width="40" height="40" border="0" /></td>'); 
    $td.parent().append($printIconTD); 
    $printIconTD.click(function(){ 
     Popup($td.html()); 
    }); 

}); 
}); 
</script> 

.... 

<c:forEach var="case" items="${distributions}"> 
<table> 
    <tr> 
     <td class="printable">Print case details</td> 
    </tr> 
</table>

該解決方案唯一的問題是神，每個人都彈出窗口禁用，所以你將不得不把各種各樣的通知，讓用戶知道

來源

2013-03-07 22:22:51

您的解決方案正在運行，但無法使用Popup（$ td.html（））; – Naveen 2013-03-08 21:14:21

你是否複製了從鏈接到堆棧溢出的彈出式函數？ – 2013-03-11 14:55:09

我沒有做過以下但理論上它應該工作：

1）定義打印樣式表，具有：

body.detail-print .detail-item{display:none} 
body.detail-print .detail-item.current{display:block}

2）定義一個事件監聽器，例如與jQuery

$(".detail-item .print").click(function(e) { 
    $("body").addClass("detail-print"); 
    $(this).closest(".detail-print").addClass("current"); 
    window.print(); 
});

這應該只打印您的打印樣式表中可見的內容。

我在這裏看到的唯一問題：如果有人想打印整個頁面後，瀏覽器將只打印最後選擇的項目。你可以使用setTimeout來重置類。我現在沒有更好的主意了......

來源

2013-03-07 22:18:37 topek

我明白你在做什麼，但是你需要在「容器」內考慮它。我得到OP想要僅打印頁面的特定區域的要點（但可能是錯誤的）所以從某種意義上說，它不僅僅是如何顯示要打印的具體細節，還有如何隱藏可能位於「上方」和「周圍」的勘誤。像'.wrapper'和'＃container'上下文一樣思考。我幾乎想把詳細視圖移動或複製到'body'，以使容器化更簡單。我做了'。no-print「類專門處理這個問題，這是您網站的方法的倒置。 – 2013-03-07 22:37:55

您可以用CSS隱藏其他所有內容，這取決於您。只需在您的打印樣式表中指定它即可。實際上，您的.no-print是相同的方法，隱藏您不需要的所有內容並顯示您需要的內容。 – topek 2013-03-07 22:42:09

'print（）'是[blocking]（http://jsfiddle.net/userdude/vVgC6/），所以你應該能夠在它返回執行後刪除這些類。我只是想着打印一些特定的可打印內容，這些內容可能會隱藏在內容中，它不僅隱藏了其他類似的項目，而且隱藏了其他通常可打印的但現在不可打印的內容，而不隱藏父項的細節需要打印。 – 2013-03-07 22:57:30

一種不同的方式在頁面上所建議的是重新加載僅顯示所選對象的頁面，然後調用打印機對話框（例如，在文檔加載時）。因此，對象旁邊的打印機圖標可以鏈接到相同的頁面，並將其傳遞給您要打印的參數以及要打印的對象的ID。

來源

2013-03-07 22:25:07

打印的<c:foreach>每個迴路單獨使用javascript

回答

相關問題