Как распечатать несколько элементов на странице по отдельности, используя CSS? - PullRequest
Новая
       6

Как распечатать несколько элементов на странице по отдельности, используя CSS?

1 голос
/ 13 февраля 2012

Структура моей страницы похожа на 

    <html>
    <body>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="/" onClick="window.print();">Print One</a> // I want this to print "My Content 1"
    <a name="one" id="one">One</a>
    <div class="one">My Content 1</div>

    <a name="two" id="two">Two</a>
    <a href="/" onClick="window.print();">Print Two</a> // I want this to print "My Content 2"
    <div class="two">My Content 2</div>

    </body>
    </html>

Теперь я хочу реализовать две разные кнопки печати для одновременной печати указанного элемента. Я знаком с CSS-подходом к печати и блокированию элементов антипринта, таких как sidebar, footer. По какой-то причине я не хочу использовать jquery, хотя можно использовать легкий js.

1 Ответ

2 голосов
/ 14 февраля 2012

создайте два шаблона стиля, один, который скрывает все, кроме содержимого 1, и другой, который скрывает все, кроме содержимого 2. Установите оба блока стиля с идентификаторами (например, id="printOne"), media="print" и с атрибутом disabled (или disabled="disabled" в XHTML)

при нажатии на ссылку для печати вы можете установить disabled = false в соответствующем шаблоне стиля, чтобы включить его для печати. ​​

Пример jsfiddle 

<!doctype html>
<html>
<head>
    <title></title>
    <style id="printOne" type="text/css" media="print" disabled>
        a, .two {display:none;}
        .one {display:block;}
    </style>
    <style id="printTwo" type="text/css" media="print" disabled>
        a, .one {display:none;}
        .two {display:block;}
    </style>
</head>
<body>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#" onClick="return printContent('printOne');">Print One</a> <!--I want this to print "My Content 1"-->
    <a name="one" id="one">One</a>
    <div class="one">My Content 1</div>

    <a name="two" id="two">Two</a>
    <a href="#" onClick="return printContent('printTwo');">Print Two</a> <!--I want this to print "My Content 2"-->
    <div class="two">My Content 2</div>

    <script type="text/javascript">
        function printContent(pid) {
            document.getElementById('printOne').disabled = !(pid === 'printOne');
            document.getElementById('printTwo').disabled = !(pid === 'printTwo');
            window.print();
            return false;
        }
    </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...