Ограничить область печати до div

Есть ли способ распечатать только вложенный «id = printarea» div (с стилем), используя только css (не javascript), в IE8 на Windows?Ограничить область печати до div

<div id="main"> 
    This should NOT be shown in Print Preview 
    <div id="printarea">ONLY this should be shown in Print Preview 
    <table><tr><th>one</th><th>one</th></tr><tr><td>one</td><td>one</td></tr></table></div> 
</div>

Я пробовал использовать css, но он ничего не отображает (очевидно) из-за наследования. Следующий пример показывает мое намерение.

@media print { 
    * { display:none; } 
    #printarea { display:block; } 
}

Я успешно использовал JavaScript (который работает), но я не считаю это элегантное решение, так как я должен был бы тянуть весь импорт CSS и блоков стиля в document.write.

function printDiv(divId){ 
    var divToPrint = document.getElementById(divId); 
    newWin= window.open(); 
    newWin.document.write('<style>table,tr,td,th{border-collapse:collapse;border:1px solid black;}</style>'); 
    newWin.document.write(divToPrint.innerHTML); 
    newWin.document.close(); 
    newWin.focus(); 
    newWin.print(); 
    newWin.close(); 
}

Пример:http://jsfiddle.net/D7ZWh/2/

Связанный: Overriding parent's CSS display property

источник

2013-12-03 Nick Grealy

Вы должны поместить все остальное содержимое в HTML элементов (обратите внимание на п тег)

<body> 
    <p>This should NOT be shown in Print Preview</p> 
    <div id="main"> 
    <p>This should NOT be shown in Print Preview</p> 
    <div id="printarea">ONLY this should be shown in Print Preview</div> 
    </div> 
</body>

Тогда вы можете скрыть все остальные элементы ниже родителя. сделать это для каждого родителя в иерархии

@media print { 
    body *, #main * { display:none; } 
    #main, #main #printarea, #main #printarea * { display:block; } 
}

EDIT:

это очень похоже на второй ответ на printing only one div

источник

2013-12-04 00:07:15 roo2

Проблема с тем, что вы хотите сделать я, что вы пытаетесь скрыть родителя, и показать ребенку. Если бы вы могли обернуть этот текст в абзаце или интервала, то вы могли бы сделать что-то вроде

#main * {display:none;} 
#main #printarea {display:block;}

Таким образом, в основном вы берете все дети # Главные, и скрывать их, а затем показать только область печати.

источник

2013-12-04 00:04:21 David

Я добавил бы «#media #printarea * {display: block;}», потому что #main * затрагивает всех детей, а не только прямых детей, и они могут быть скрыты, даже если #printarea отображается, это может быть "#main> * {display: none;}", но я думаю, что это не решение для кроссбраузера – arieljuod

Я думаю, что дочерний селектор будет работать. Но да, тот или другой был бы необходим. – David

Если вы можете изменить разметку, то очевидно, что лучше всего сделать, это обертка содержимое, которое вы хотите скрыть в его собственном теге (-ах), и просто спрячьте их. Однако, если вы действительно хотите сделать это, используя только CSS и не изменяя DOM, вы можете сыграть некоторые трюки с позиционированием. Попробуйте что-то вроде этого:

@media print { 
    #main {position:relative; padding:0; height:1px; overflow:visible;} 
    #printarea {position:absolute; width:100%; top:0; padding:0; margin:-1px;} 
}

Это в основном сворачивания #main DIV, и положение #printarea на нем, так что охватывает все. (Я добавил margin:-1px, так что он покрывает границу #main). Просто убедитесь, что у #printarea есть фон, и вам должно быть хорошо идти.

Попробуйте распечатать рамку дисплея из этой скрипки: http://jsfiddle.net/D7ZWh/3/, чтобы увидеть результат.

источник

2013-12-04 00:14:04

Ограничить область печати до div

ответ

Смежные вопросы