Question

我正在使用datables插件在我的网络应用上绘制表格。

但问题出在这里。

我有一个打印按钮，它叫我这个功能：

function printHTML(clonedDive){
        var iframe = document.createElement("iframe");
        document.body.appendChild(iframe);
    iframe.contentWindow.onunload = function(){
            $("#submenu").show("fast");
            $(".content-secondary").animate({
                             width: '15%'
                         });

            $(".content-primary").animate({
                             width: '83%'
                         });     
     };
      iframe.contentWindow.document.body.appendChild(clonedDive);
      iframe.contentWindow.print();

      document.body.removeChild(iframe); 
}

这就是我调用此函数的方式：

printHTML( document.getElementById("results").cloneNode(true));

现在results div看起来像这样：

<div id="results">
<table id="stops" width="100%" border="1" cellspacing="2" cellpadding="5" >
                <thead>
                    <tr class="even">

                    </tr>
                </thead>

                      <tbody>
                      </tbody>

                     </table>
                     </br>

                     <hr>

                     <p id="title"><b>Map</b></p>
                     <div id="map_find">

                     </div>
</div>

所以表的工作方式如下：当您单击该行时，该行会突出显示并显示地图。因此，当我单击打印按钮时出现问题。

在打印预览中，我可以看到该表，但该行未突出显示，并且未显示Google地图。它似乎向我展示了首先初始化的div，并且没有突出显示的行，并且未显示Google地图。

我该怎么办？

Answer 1

您是否考虑过更改为使用@media types？

@media print
{
  *{
     visibility: hidden;
  }
  #results{
     visibility: visible;
  }
}

您可以使用visibility: hidden以及要使用visibility: visible打印的任何内容设置您不想打印的所有内容的可见性。

然后点击，你会打电话：

window.print()

<强> EXAMPLE WITH MEDIA TYPE

<强> EXAMPLE WITHOUT MEDIA TYPE

打印某些div无法正常工作

1 个答案: