打印某些 div 无法正常工作

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>

所以表格是这样工作的：当您单击行时，该行会突出显示并显示地图。所以当我点击打印按钮时出现问题。

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

我能做什么？

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