У меня есть страница типа документации с iframe внутри. Я пытаюсь переопределить стандартную версию браузера (Ctrl + p) для печати содержимого только iframe.
Я знаю, как печатать содержимое iframe с помощью javascript:
window.frames['webcontent'].focus();
window.frames['webcontent'].print();
Я знаю, как запустить javascript перед печатью, например. как описано здесь: Проверить, когда пользователь выбрал печать с использованием javascript
Любые советы?
Спасибо
Это невозможно (используя Javascript). Существует некоторая экспериментальная поддержка пользовательских событий печати в современных браузерах, но те не отменяются ( "простые события" ), поэтому вся страница будет печататься, даже если вы вставляете пользовательский код для печати интересующего кадра.
Учитывая это ограничение, лучше всего предложить пользователям большую кнопку, которая запускает вашу собственную функцию печати фреймов (см. printContentFrameOnly ниже, запустите ее без аргументов) и надейтесь, что они будут использовать кнопку вместо ctrl- р.
Если бы это было возможно, это был бы способ сделать это (на основе этого ответа):
// listener is a function, optionally accepting an event and
// a function that prints the entire page
addPrintEventListener = function (listener) {
// IE 5.5+ support and HTML5 standard
if ("onbeforeprint" in window) {
window.addEventListener('beforeprint', listener);
}
// Chrome 9+, Firefox 6+, IE 10+, Opera 12.1+, Safari 5.1+
else if (window.matchMedia) {
var mqList = window.matchMedia("print");
mqList.addListener(function (mql) {
if (mql.matches) listener(); // no standard event anyway
});
}
// Your fallback method, only working for JS initiated printing
// (but the easiest case because there is no need to cancel)
else {
(function (oldPrint) {
window.print = function () {
listener(undefined, oldPrint);
}
})(window.print);
}
}
printContentFrameOnly = function (event) {
if (event) event.preventDefault(); // not going to work
window.frames['webcontent'].focus();
window.frames['webcontent'].print();
}
addPrintEventListener(printContentFrameOnly);
Брат, это может быть легко достигнуто с помощью CSS: См. thisJSfiddle: Протестировано
<style>
@media print{
body * {display:none;}
.toPrint{display:block; border:0; width:100%; min-height:500px}
}
</style>
Пусть файл HTML:
<body>
<h3>I do not want this title Printed</h3>
<p> This paragraph should not be printed</p>
<iframe class="toPrint" src="http://akitech.org"></iframe>
<button onclick="window.print()">Print</button>
</body>
Идея состоит в том, чтобы установить содержимое iframe на странице и напечатать ТОЛЬКО этот контент, спрятав исходное содержимое.
Это можно сделать, получив содержимое iframe, когда инициируется событие Ctrl + P (через JavaScript), и печатает только его содержимое (с помощью типа CSS @media).
Код HTML:
<div id="dummy_content"><!-- Here goes the iframe content, which will be printed --></div>
<div id="content_wrapper">
<div id="current_content">Current Content that the user see<div>
<iframe id="myIframe" src="iframe.html"></iframe>
</div>
Код CSS:
@media screen {
#dummy_content {
display:none; /* hide dummy content when not printing */
}
}
@media print {
#dummy_content {
display:block; /* show dummy content when printing */
}
#content_wrapper {
display:none; /* hide original content when printing */
}
}
Код JavaScript:
var dummyContent = document.getElementById("dummy_content");
function beforePrint() {
var iFrame = document.getElementById("myIframe");
dummyContent.innerHTML = iFrame.contentWindow.document.body.innerHTML; // populate the dummy content (printable) with the iframe content
}
document.onkeydown = function(e) {
if (e.ctrlKey && e.keyCode == 80) {
beforePrint();
}
}
Вы можете определить файл css для печати:
@media print {
* { display: none; }
iframe { display: block; }
}
ИЗМЕНИТЬ
Mybad не тестировал его.
* { display: none; } is somehow overwriting all
Но это работает как шарм
http://jsfiddle.net/c4e3H/
@media print {
h1, p{ display: none; }
}
Единственный способ, о котором я могу думать, - это сокрытие всего содержимого в документе, кроме iframe, и его соответствие целому документу.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
body.hide *, body #backdrop
{
display: none !important;
}
body.hide #my_print_iframe, body.hide #backdrop
{
background: white;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 0;
width: 100%;
height: 100%;
display: block !important;
}
@media print {
body.hide #backdrop
{
display: none !important;
}
}
</style>
<script>
$(document).on('keydown', function(e){
if (e.keyCode == 80 && ( e.metaKey || e.ctrlKey ) ) {
$("body").addClass('hide');
setTimeout(function(){
$("body").removeClass('hide');
},1000)
}
})
</script>
</head>
<body>
<div>
this is some visible text
</div>
<iframe id="my_print_iframe" src="//example.com"></iframe>
</body>
</html>
Я использовал тайм-аут (неприятный, я знаю), потому что по крайней мере хром 38 не отправляет событие keyup после ctrl + p
Привет, возможно, этот код поможет вам.
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'printMe', 'height=400,width=600');
mywindow.document.write('<html><head><title>Print Me</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
и вызовите функцию PrintElem ('iframe') на вашей странице.