entiresol Ответов: 3

Печать конкретного div с помощью CSS

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

Код Java-скрипта:
<script type="text/javascript">
    function PrintDiv() {
        var divToPrint = document.getElementById('report');
        var popupWin = window.open('', '_blank', 'width=300,height=300');
        popupWin.document.open();
        popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
        popupWin.document.close();
    }
     </script>

Связывание CSS-файла:
@раздел css {
<ссылка с href="@url-адрес.Содержание("../../Содержание/печать.ПТК")" отн="стилей" СМИ="печать"/&ГТ;
}

файл CSS:
/*
Table Style - This is what you want
------------------------------------------------------------------ */
@media print
{
table.table1 a:link
{
    color: #666;
    font-weight: bold;
    text-decoration: none;
}
.table1 a:visited
{
    color: #999999;
    font-weight: bold;
    text-decoration: none;
}
.table1 a:active, .table1 a:hover
{
    color: #bd5a35;
    text-decoration: underline;
}
.table1
{
    font-family: Calibri;
    color: Black;
    font-size: 12px;
    text-shadow: 1px 1px 0px #fff;
    background: #eaebec; /*margin:20px;*/
    border: #ccc 1px solid;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 1px 2px #d1d1d1;
    -webkit-box-shadow: 0 1px 2px #d1d1d1;
    box-shadow: 0 1px 2px #d1d1d1;
}
.table1 th
{
    /*padding:21px 25px 22px 25px;*/
    border-top: 1px solid #fafafa;
    border-bottom: 1px solid #e0e0e0;
    height: 15px;
    font-weight: bold;
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
    background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
.table1 th:first-child
{
    text-align: left; /*padding-left:20px;*/
}
.table1tr:first-child th:first-child
{
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
}
.table1 tr:first-child th:last-child
{
    -moz-border-radius-topright: 3px;
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
}
.table1 tr
{
    text-align: left;
    padding-left: 10px;
}
.table1 tr td:first-child
{
    text-align: left;
    padding-left: 10px;
    border-left: 0;
}
.table1 tr td
{
    height: 10px;
    padding: 1px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #fafafa;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
    background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
.table1 tr.even td
{
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
    background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
.table1 tr:last-child td
{
    border-bottom: 0;
}
.table1 tr:last-child td:first-child
{
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.table1 tr:last-child td:last-child
{
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.table1 tr:hover td
{
    background: #f2f2f2;
    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
    background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);
}

.list
{
    margin-left: 80px;
}

#nonPrintable{display:none;}

}

3 Ответов

Рейтинг:
2

Prasad Khandekar

Привет,

Измените свой код printDiv так, чтобы в результирующем всплывающем окне html также была включена ссылка на css. В настоящее время вы кодируете только html-код рассматриваемого div.

С уважением,

entiresol

Все еще не работает... :-(

Prasad Khandekar

Когда вы включаете ссылку на стиль и установить атрибут средств массовой информации для всех. Следующий код показывает это.

значение showpopup функции () {
var myDiv = document.getElementById('bodyWrapper');
окно окно ВАР=.открытые(", 'SecondWindow', 'панель инструментов=0,стат=0');
var style = newWindow.document.createElement('ссылка');
стиль.type = "text/css";
style.rel = "таблица стилей";
стиль.href = "http://host/css/style.css";
style.media = "все";
окно.документ.писать ("в<html-код&ГТ;&ЛТ;тело" +
"отзывчивый light2012-главная-переключатель класс='главная Switcher' " +
"önload='window.print()'>" +
myDiv.innerHTML будет +
"в</тело&ГТ;&ЛТ;/HTML и ГТ;");
newWindow.document.getElementsByTagName("head")[0].appendChild(style);
окно.документ.рядом();
}

С уважением,

Рейтинг:
2

Nirav Prabtani

попробовать это...;)


<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
     <script type="text/javascript">     
        function PrintDiv() {    
           var divToPrint = document.getElementById('divToPrint');
           var popupWin = window.open('', '_blank', 'width=300,height=300');
           popupWin.document.open();
           popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
            popupWin.document.close();
                }
     </script>
   </head>
        <body >
                other contents
            <div id="divToPrint">
               <div style="width:200px;height:300px;background-color:teal;">
                  This is the div to print
                </div>
            </div>
            <div>
                <input type="button" value="print" onclick="PrintDiv();" />
            </div>
        </body> 
</html>

entiresol

Уже сделано, но не работает.

Рейтинг:
2

Member 14359770 

function showPopup() {
var myDiv = document.getElementById('bodyWrapper');
var newWindow = window.open('', 'SecondWindow', 'toolbar=0,stat=0');
var style = newWindow.document.createElement('link');
style.type = "text/css";
style.rel = "stylesheet";
style.href = "http://host/css/style.css"; 
style.media = "all";
newWindow.document.write("<html><body " + 
"class='responsive light2012-home-switcher home switcher' " +
" önload='window.print()'>" +
myDiv.innerHTML + 
"</body></html>");
newWindow.document.getElementsByTagName("head")[0].appendChild(style);
newWindow.document.close();
}

Regards