javascript - 如何动态地将CSS媒体类型添加到页面

Question

我无法从我的 Web 应用程序中仅打印甘特图(或例如表格)。

我有一个带有甘特图的 Web 应用程序，我们在其中进行日程安排。 现在我的要求是我只想在发出打印命令时打印甘特图。 我在我的页面样式标签中尝试了以下代码:

<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 文件中定义的任何内容。

请告诉我如何只打印整个应用程序中的甘特图。 * 在运行时生成甘特图(或表格)

Answer 1

你可以结合css使用这个javascript函数(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;
}

要正常工作，您必须在另一个选项卡中打开您的页面，或者在打印图表时向正文添加自定义类，然后删除该类。

这段代码已经过测试，即使我在保存在本地的页面上使用它也能很好地工作