Как показать другой div при печати с использованием Javascript

Question

Как показать другой div при печати с использованием Javascript

0

JavaScript

<script type="text/javascript">
        function printDiv() {

 var printContent1 = document.getElementById('divMail1');
 var printContent2 = document.getElementById('divMail2');

            var newWin = window.open('', 'PrintWindow', 'width=800,height=530,top=10,left=100,scrollbars=1,resizable=yes');
            newWin.document.open();
            newWin.document.write('<html/><body  onload="window.print()">' + printContent1.innerHTML + '</body></html>');
            newWin.document.close();
        }

</script>

HTML

  <div id="divMail1">
        <div>
            <img src="image1.jpg"/>
        </div>
     <div>
            <img src="image2.jpg"/>
        </div>


    <div id="divMail2">
        <div>
            <img src="image3.jpg"/>
        </div>
     <div>
            <img src="image4.jpg"/>
        </div>
    </div>
<input type="button" value="Print" onclick="printDiv()"/>

Привет, я хочу показать один div (divMail1) в предварительном просмотре и распечатать другой div (divMail2). Является ли это возможным. пожалуйста помогите.

Pearl 26 окт. 2013, в 09:50

Источник

0

Вы не можете сделать это. Предварительный просмотр печати показывает именно ту страницу, которая была отправлена на принтер. (Если под «предварительным просмотром печати» вы не имеете в виду то, что отображается в браузере, это другое дело.)
JJJ 26 окт. 2013, в 07:20

Теги:

javascript

jquery

3 ответа

Ещё вопросы

Вы не можете сделать это. Предварительный просмотр печати показывает именно ту страницу, которая была отправлена на принтер. (Если под «предварительным просмотром печати» вы не имеете в виду то, что отображается в браузере, это другое дело.)

underscore · Answer 1 · 2013-10-26T05-53-00.000Z

Делайте это только с помощью CSS

<head>
        <style type="text/css">

        #printable { display: none; }

        @media print
        {
            #non-printable { display: none; }
            #printable { display: block; }
        }
        </style>
    </head>
    <body>
        <div id="non-printable">
            Your normal page contents
        </div>

        <div id="printable">
            Printer version
        </div>
    </body>

Praveen Kumar Purushothaman · Answer 2 · 2013-10-26T05-45-00.000Z

Вместо использования JavaScript вы можете использовать print.css, добавив media="print". Итак, в вашем основном CSS вам нужно добавить следующее:

.print-only {display: none;}
.do-not-print {display: block;}

И в print.css:

.print-only {display: block;}
.do-not-print {display: none;}

В вашем случае код в вашем основном CSS:

#divMail1 {display: block;}
#divMail2 {display: none;}

И в print.css:

#divMail1 {display: none;}
#divMail2 {display: block;}

Если есть JDfiddle, было бы здорово. Извините за глупость.

Subdigger · Answer 3 · 2013-10-26T05-15-00.000Z

использовать css вместо этого

#divMail1 {
  display: block;
}

#divMail2 {
  display: none;
}
@media print {
  #divMail1 {
    display: none;
  }

  #divMail2 {
    display: block;
  }
}

для принтера? ... вы можете создать другую страницу без лишних элементов и просто нажать кнопку «печать»