Question

我遇到了一个问题，即只能从我的网络应用程序中打印甘特图（或者例如表格）。

我有一个带有甘特图的Web应用程序，我们正在进行调度。现在我的要求是我只想在我给出打印命令时打印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>

但由于gantt在运行时动态生成，并且此解决方案不起作用，它只给出了.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;
}

为了正常工作，您必须在另一个标签页中打开您的页面，或者在打印图表时将自定义类添加到正文，然后删除该类。

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

如何动态地将css媒体类型添加到页面

1 个答案: