Печать HTML div со стилями, не работающими с bootstrap

Я пытаюсь распечатать содержимое div с помощью Javascript. Я использую внешние файлы css для стилизации. Но печатный документ не применяет стили после добавления bootstrap.css.Печать HTML div со стилями, не работающими с bootstrap

Вот мой код.

HTML страницы

<html> 
    <head> 
     <title>Print Div Test</title> 
     <link href="css/mycss.css" rel="stylesheet" /> 
     <link href="css/bootstrap.css" rel="stylesheet" /> 

     <script src="js/lib/jquery-1.11.1.js"></script> 
     <script type="text/javascript"> 

      function PrintElem() { 
       Popup($('#mydiv').html()); 
      } 

      function Popup(data) { 
       var mywindow = window.open('', 'my div', 'height=400,width=600'); 
       mywindow.document.write('<html><head><title>my div</title>'); 
       mywindow.document.write("<link rel=\"stylesheet\" href=\"css/bootstrap.css\" type=\"text/css\" media=\"print\" />"); 
       mywindow.document.write("<link rel=\"stylesheet\" href=\"css/mycss.css\" type=\"text/css\" />"); 
       mywindow.document.write('</head><body >'); 
       mywindow.document.write(data); 
       mywindow.document.write('</body></html>'); 

       mywindow.print(); 
       //mywindow.close(); 

       return true; 
      } 

     </script> 
    </head> 
<body> 
    <div> 
     <div id="mydiv" class="row"> 
      <h1>This will be printed. </h1> 
      <div class="col-md-6"> 
       <div style="color: red">In line styles applied.</div> 
      </div> 
      <div class="col-md-6"> 
       <div class="myclass">Style from sheet</div> 
      </div> 

     </div> 
<input type="button" value="Print Div" onclick="PrintElem()" /> 
</div> 
</body> 
</html>

CSS Файл

.myclass { 
    color: greenyellow; 
}

Является ли это проблемой с запросами средств массовой информации? Перед добавлением бутстрапа он работает с другим стилем.

источник

2014-10-14 Janith Widarshana

попробовать этот .MyClass {цвет: greenyellow! important;} –

Добавление важного успеха для соответствующего элемента, но мне нужно применить стили бутстрапа к печатающему документу. Coz Я использую систему загрузочной сетки для всего документа, как указано выше. –

Да, это «проблема» с запросами на загрузку. Если вы проверите bootstrap css, вы увидите, что col-sm-xx получает размер после 768px, col-md-xx после 992px, видовой экран A4-печати - 670px? (Safe Width in Pixel for Printing Web Pages?). Таким образом, вы должны пользователем Col-хв-хх для печати или добавить медиа-запрос использовать Col-см-хх

@media print { 
     .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, 
     .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { 
      float: left;    
     } 

     .col-sm-12 { 
      width: 100%; 
     } 

     .col-sm-11 { 
      width: 91.66666666666666%; 
     } 

     .col-sm-10 { 
      width: 83.33333333333334%; 
     } 

     .col-sm-9 { 
      width: 75%; 
     } 

     .col-sm-8 { 
      width: 66.66666666666666%; 
     } 

     .col-sm-7 { 
      width: 58.333333333333336%; 
     } 

     .col-sm-6 { 
      width: 50%; 
     } 

     .col-sm-5 { 
      width: 41.66666666666667%; 
     } 

     .col-sm-4 { 
      width: 33.33333333333333%; 
     } 

     .col-sm-3 { 
      width: 25%; 
     } 

     .col-sm-2 { 
       width: 16.666666666666664%; 
     } 

     .col-sm-1 { 
       width: 8.333333333333332%; 
     }    
}

Может нужно добавить еще внутри @media печати

источник

2014-10-14 07:48:02 tmg

Да, это работает для меня. Это означает, что мне нужно переопределить все классы bootstrap css в моем пользовательском файле css? –

все те, что находятся внутри запросов ширины мини-ширины, вероятно, да – tmg

Печать HTML div со стилями, не работающими с bootstrap

ответ

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