Как добавить тип css-типа динамически на страницу

Question

У меня возникла проблема с печатью только gantt-диаграммы (или, например, таблицы) из моего веб-приложения.

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

<style type="text/css"> 
 

 
@media print { 
 
    body * { 
 
    visibility: hidden; 
 
    } 
 
    #content-container , .divGcBody { 
 
    visibility: visible; 
 
    } 
 
} 
 
........}

<div class="divGcBody"> 
 
    <div class="divGcBodySection"> 
 
     <div class="divGcColumns"></div> 
 
     <!-- end of divGcColumns --> 
 
     <div class="divGcTimeline"> 
 
      <div class="divHCDispList"> 
 
       <div class="divTmlnRows divSlider"></div> 
 
      </div> 
 
      <!-- end of divHCDispList --> 
 
     </div> 
 
     <!-- end of divGcTimeline --> 
 
    </div> 
 
</div>

но как Гант получения генерируется динамически во время выполнения, и это решение не работает, и его дать мне только то, что определяет в. jsp-файл.

, пожалуйста, дайте мне знать, как я могу напечатать только мой gantt из всего моего приложения. * что Гант (или таблица) получать генерируются во время выполнения

Answer 1

Вы можете использовать эту функцию Javascript функции в сочетании с CSS (JS использует JQuery):

function printOnlyGantt() { 
      var actualWidth = $('#myGantt').width(); 
      $('body').prepend($('#myGantt')); 
      $('#myGantt').addClass("myScreenshot").css('width',actualWidth); 
      $('body>*').css('display', 'none').css('visibility','visible'); 
     } 
    }); 

CSS:

body { 
display: block !important; 
} 

.myScreenshot { 
position: absolute; 
left:0px; 
top: 0px; 
} 

body>*{ 
    visibility:hidden; 
} 

.myScreenshot:first-child{ 
    display: initial !important; 
} 

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

Этот код протестирован и работает довольно хорошо, даже если я использую его на сохраненных в локальных страницах