Как я печатаю часть представленной страницы HTML в JavaScript?
Это - не обязательно что-то, что можно вытолкать на iPod и просто охладить к, но , Diggnation является веселым видеоподкастом с Kevin Rose и Alex Albrecht.
Они говорят о "некоторых главных новостях на отправленном пользователями новостном сайте digg.com". Это действительно не имеет многого в способе разработки программного обеспечения (хотя иногда история открывается с тем), но является большим для значения развлечений.
3 ответа
Я бы сказал примерно так:
<html>
<head>
<title>Print Test Page</title>
<script>
printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">')
function printDiv(divId) {
window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML;
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
}
</script>
</head>
<body>
<h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1>
<b>Div 1:</b> <a href="javascript:printDiv('div1')">Print</a><br>
<div id="div1">This is the div1's print output</div>
<br><br>
<b>Div 2:</b> <a href="javascript:printDiv('div2')">Print</a><br>
<div id="div2">This is the div2's print output</div>
<br><br>
<b>Div 3:</b> <a href="javascript:printDiv('div3')">Print</a><br>
<div id="div3">This is the div3's print output</div>
<iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
</body>
</html>
Вы можете использовать таблицу стилей печати, но это повлияет на все функции печати.
Вы можете попробовать иметь внешнюю таблицу стилей печати, которая включается через JavaScript при нажатии кнопки, и затем вызовите window.print () , затем удалите его.
Возможные альтернативы
js-float-table-headers
js-float-table-headers (Google Code)
В Drupal
у меня есть сайт Drupal 6. Я был на странице «Модули» администратора и заметил, что в таблицах есть именно такая функция!
Глядя на код, кажется, что она реализована файлом с именем tableheader.js . Он применяет эту функцию ко всем таблицам с классом sticky-enabled .
Для сайта Drupal я хотел бы иметь возможность использовать этот модуль tableheader.js как есть для пользовательского контента. tableheader.js , похоже, не присутствует на страницах пользовательского контента в Drupal. Я отправил сообщение на форум , чтобы спросить, как изменить тему Drupal, чтобы она стала доступной. Согласно ответу, tableheader. и / или удалить динамически добавляемый CSS после того, как печать произошла.
Ниже приведен полный рабочий пример, с той лишь разницей, что CSS для печати не загружается динамически. Если вы хотите, чтобы он был действительно ненавязчивым, вам необходимо загрузить CSS динамически, как в этом ответе .
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Print Portion Example</title>
<style type="text/css">
@media print {
body * {
display:none;
}
body .printable {
display:block;
}
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<h1>Print Section Example</h1>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="div5">Div 5</div>
<div id="div6">Div 6</div>
<p><input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" /></p>
<script type="text/javascript">
function divPrint() {
// Some logic determines which div should be printed...
// This example uses div3.
$("#div3").addClass("printable");
window.print();
}
</script>
</body>
</html>