Как распечатать часть отображаемой HTML-страницы в JavaScript?
Код JavaScript window.print() может печатать текущую HTML-страницу.
Если у меня есть div на странице HTML (например, страница, созданная с помощью ASP.NET MVC), тогда я хочу для печати только div.
Есть ли какой-либо jQuery ненавязчивый JavaScript или обычный код JavaScript для реализации этого запроса?
Сделав это более понятным, предположим, что отображаемая HTML-страница похожа:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head" runat="server">
<title>
<asp:ContentPlaceHolder runat="server" ID="TitleContent" />
</title>
</head>
<body>
<div id="div1" class="div1">....</div>
<div id="div2" class="div2">....</div>
<div id="div3" class="div3">....</div>
<div id="div4" class="div4">....</div>
<div id="div4" class="div4">....</div>
<p>
<input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" />
</p>
</body>
</html>
Затем я хочу нажать кнопку "Печать", только распечатать div3.
Ответы
Ответ 1
Я бы сделал это примерно так:
<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 print output</div>
<br><br>
<b>Div 2:</b> <a href="javascript:printDiv('div2')">Print</a><br>
<div id="div2">This is the div2 print output</div>
<br><br>
<b>Div 3:</b> <a href="javascript:printDiv('div3')">Print</a><br>
<div id="div3">This is the div3 print output</div>
<iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
</body>
</html>
Ответ 2
В том же направлении, что и некоторые из предложений, вам необходимо выполнить хотя бы следующее:
- Загрузите некоторый CSS динамически через JavaScript
- Создание некоторых правил CSS для печати
- Примените свои правила оформления CSS с помощью JavaScript
Пример CSS может быть таким простым, как это:
@media print {
body * {
display:none;
}
body .printable {
display:block;
}
}
Вместо этого ваш JavaScript должен будет применить только класс "printable" к вашему целевому div, и это будет единственное, что видится (пока нет других противоречивых правил CSS - отдельное упражнение) при печати.
<script type="text/javascript">
function divPrint() {
// Some logic determines which div should be printed...
// This example uses div3.
$("#div3").addClass("printable");
window.print();
}
</script>
Возможно, вы захотите удалить класс из целевого объекта после печати и/или удалить динамически добавленный 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>
Ответ 3
Попробуйте этот код JavaScript:
function printout() {
var newWindow = window.open();
newWindow.document.write(document.getElementById("output").innerHTML);
newWindow.print();
}
Ответ 4
<div id="invocieContainer">
<div class="row">
...Your html Page content here....
</div>
</div>
<script src="/Scripts/printThis.js"></script>
<script>
$(document).on("click", "#btnPrint", function (e) {
e.preventDefault();
e.stopPropagation();
$("#invocieContainer").printThis({
debug: false, // show the iframe for debugging
importCSS: true, // import page CSS
importStyle: true, // import style tags
printContainer: true, // grab outer container as well as the contents of the selector
loadCSS:"/Content/bootstrap.min.css", // path to additional css file - us an array [] for multiple
pageTitle: "", // add title to print page
removeInline: false, // remove all inline styles from print elements
printDelay: 333, // variable print delay; depending on complexity a higher value may be necessary
header: null, // prefix to html
formValues: true // preserve input/form values
});
});
</script>
Для кода comStyle.js, скопируйте и подставьте URL-адрес на новой вкладке https://raw.githubusercontent.com/jasonday/printThis/master/printThis.js
Ответ 5
Вы можете использовать таблицу стилей печати, но это повлияет на все функции печати.
Вы можете попробовать иметь таблицу стилей печати внешне, и она включается через JavaScript при нажатии кнопки, а затем вызывает window.print(), а затем удаляет ее.
Ответ 6
Как использовать холст? Нарисуйте его в новом окне, а затем вызовите метод print() из этого нового окна?
Здесь вы можете найти дополнительную документацию: drawWindow()
