2010-01-31 2 views
0

Попробую объяснить:* Несколько * Печать Конкретная Div

У меня есть множество Див классов, но для простоты, скажем, у меня есть только 3.

Кто-то просматривает Div 1, и я хочу дать им возможность только распечатать DIV 1, опуская 2 и 3.

Однако на той же странице я хотел бы дать им возможность ТОЛЬКО ПЕЧАТИ DIV 2. Или распечатать только DIV 3.

Я думаю, что получаю, как вы можете опустить некоторые вещи от печати. Но как вы можете выбрать раздел здесь или там на той же странице, который будет напечатан с помощью ссылки для печати.

Спасибо, Tracy

+0

Вы хотите напечатать выбранный div и окружение или только содержимое самого маленького divs? –

ответ

0

Вы можете использовать JQuery, чтобы показать/скрыть дивы. Читайте JQuery учебник:

http://docs.jquery.com/Tutorials

код будет выглядеть следующим образом:

<script> 
function showDiv(n) { 
    $('.divs').hide(); 
    $('#div_'+n).show(); 
} 
$(document).ready(function() { showDiv(1); }); 
</script> 
<a href='javascript:showDiv(n)'>show div n</a> 
<div class='divs' id='div_n'>I'm div n</div> 
+0

Да, я знаю, как показывать/скрывать divs, но как вы печатаете конкретные div? – flipflopmedia

0

Есть много связанных сообщений о содержании печати сНа, данный вопрос остается открытым, хотя это было предложено в " 10 .. Следующая функция JavaScript может использоваться для печати содержимого выбранного тега Div. Надеюсь это поможет. Declaimer: Я использовал некоторые из существующих ответов, исправленный/расширенный код/​​ошибка (ы), чтобы работать с (и тестироваться на) IE-8.

function printDiv(divName) { 
    var divToPrint = document.getElementById(divName); 
    var newWin = window.open('', 'PrintWindow', 'width=400, height=400, top=100, left=100', ''); 
    newWin.document.open(); 
    newWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>'); 
    newWin.document.close(); 
    setTimeout(function() { newWin.close(); }, 10); 
} 

Вызов printDiv из любого места на странице или из выбранного Div. Вот тест ссылка:

<a href="Javascript:printDiv('divCustomerData')">Print Customer Data</a> 

<a href="Javascript:printDiv('divOrderData')">Print Order Data</a> 

Назначают соответствующие идентификаторы для Div, что должно быть напечатано:

<div id="divCustomerData">Div Contents goes here... </div> 

Единственная загвоздка сейчас он теряет стили CSS. Я обновлю ответ, когда у меня появится шанс исправить ситуацию. Благодарю.

+0

Любопытно, есть ли способ добавить к этому скрипту и вызвать вашу страницу CSS для загрузки в новом окне? Мне кажется, что мне нужно ответить сегодня, на мой вопрос, который я задал 71/2 года назад! – flipflopmedia

+1

Ничего, это было легко. Я просто добавил отсутствующие заголовки и добавил тег css и связал с ним. – flipflopmedia

0

https://github.com/jasonday/jquery.printThis

Я дал бы каждый Див идентификатор, а затем, используя вышеупомянутый плагин (я писал) указать в соответствии с сНом ид.

+0

Да, прошло много лет с тех пор, как я разместил этот вопрос. Сегодня я нашел себе тот же ответ. Просто хотел упомянуть, что ваш URL-адрес изменился на вашем сайте из вышесказанного выше: https://github.com/jasonday/printThis – flipflopmedia

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