我試圖打印我的應用程序的特定部分。打印網頁的特定部分
該應用程序有一個用戶列表，顯示他們的名字和姓氏。當我點擊一個用戶時，我會看到一個彈出窗口，提供更詳細的信息。
我該如何去打印一個用戶點擊的彈出窗口？ 彈出如下：
<div id="user<?=$user->id;?>" class="popup">
<div class="details">
User details...
</div>
<a href="#print">Print</a>
</div>
打印按鈕不工作尚未雖然。
您可以使用簡單的java腳本來打印頁面的特定div。
var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
你將不得不打開一個新窗口（或瀏覽到一個新的頁面）只包含您希望用戶能夠打印
Javscript信息：
function printInfo(ele) {
var openWindow = window.open("", "title", "attributes");
openWindow.document.write(ele.previousSibling.innerHTML);
openWindow.document.close();
openWindow.focus();
openWindow.print();
openWindow.close();
}
HTML：
<div id="....">
<div>
content to print
</div><a href="#" onclick="printInfo(this)">Print</a>
</div>
這裏有一些注意事項：錨點與包含要打印的內容的div之間不能有空格
這太棒了！當然，如果你不想在你的物品後面打印鏈接，或者你希望它有點漂亮，那麼你會遇到一些挑戰。我通過給href一個ID來解決這個挑戰，將Print改爲非打破空間，並用getElementById引用其他地方的click（）事件。謝謝！！ – Mmm
no - 只是使用CSS media =「print」 –
由於這裏回答：https://stackoverflow.com/a/1072151/421243，則可以在特定部分添加到一個隱藏幀的JavaScript，注重它，並打印出來。
這是與javascript –
在printPageArea()函數中，傳遞要打印的特定div ID。我從codexworld.com找到了這個JavaScript代碼。
function printPageArea(areaID){
var printContent = document.getElementById(areaID);
var WinPrint = window.open('', '', 'width=900,height=650');
WinPrint.document.write(printContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
完整的代碼和教程可以從這裏找到 - How to Print Page Area using JavaScript。
我做了這個jQuery的擴展打印件的選擇的HTML：$('#div2').print();
$.fn.extend({
print: function() {
var frameName = 'printIframe';
var doc = window.frames[frameName];
if (!doc) {
$('<iframe>').hide().attr('name', frameName).appendTo(document.body);
doc = window.frames[frameName];
}
doc.document.body.innerHTML = this.html();
doc.window.print();
return this;
}
});
看到它在行動here。
代替所有複雜的JavaScript的，你其實可以用簡單的CSS實現這一點：只要使用兩個CSS文件，一個爲你的正常屏幕顯示，而另一個爲ONLY要打印的內容的顯示。在後一個文件中，隱藏您不想打印的所有內容，只顯示彈出窗口。
記住同時定義CSS文件的media屬性：
<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />
這裏是我的增強版本，當我們要加載CSS文件或存在於部分圖像參考打印。
在這些情況下，我們必須等到css文件或圖像完全加載後再調用print（）函數。因此，我們最好將print（）和close（）函數調用移動到html中。以下是代碼示例：
var prtContent = document.getElementById("order-to-print");
var WinPrint = window.open('', '', 'left=0,top=0,width=384,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write('<html><head>');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/normalize.css">');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/receipt.css">');
WinPrint.document.write('</head><body onload="print();close();">');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write('</body></html>');
WinPrint.document.close();
WinPrint.focus();
只需使用CSS隱藏不想打印的內容即可。 當用戶選擇打印 - 頁面將着眼於「媒體=」打印打印‘ CSS按指示隱藏內容」 CSS中的說明對頁面的佈局
的媒體=’。我們不想打印。
<!-- CSS for the things we want to print (print view) -->
<style type="text/css" media="print">
#SCREEN_VIEW_CONTAINER{
display: none;
}
.other_print_layout{
background-color:#FFF;
}
</style>
<!-- CSS for the things we DO NOT want to print (web view) -->
<style type="text/css" media="screen">
#PRINT_VIEW{
display: none;
}
.other_web_layout{
background-color:#E0E0E0;
}
</style>
<div id="SCREEN_VIEW_CONTAINER">
the stuff I DO NOT want printed is here and will be hidden -
and not printed when the user selects print.
</div>
<div id="PRINT_VIEW">
the stuff I DO want printed is here.
</div>
這個效果很好 - 而且非常簡單明瞭 - 謝謝！ :) –
可能重複的[只打印
？]（http://stackoverflow.com/questions/468881/print-div-id-printarea-div - 僅） –