如何与主窗口一起打印弹出窗口内容答案

【问题标题】：How to print pop-up window contents along with main window如何与主窗口一起打印弹出窗口内容
【发布时间】：2012-05-13 07:40:28
【问题描述】：

我正在开发一个简单的基于 jQuery 的 Web 应用程序计算器，其中显示了 5 个弹出窗口及其内容。但最后当我点击主窗口的打印按钮时，只打印出主窗口的内容。但我需要打印所有弹出窗口内容以及主窗口。我在谷歌上搜索过，但没有得到任何有效的答案。

这是我的打印功能：

 <SCRIPT LANGUAGE="JavaScript">
    if (window.print) {
       document.write('<form> ' + '<input type=button name=print value="Print" '
                        + 'onClick="javascript:window.print();"></form>');
    }
 </script>

【问题讨论】：

标签： javascript jquery printing popup

【解决方案1】：

当您调用window.print() 时，javascript 弹出窗口已关闭，因此显然它们不会以这种方式打印。

您可以通过各种形式来实现，对于所有这些，您很可能必须为打印按钮的onclick 事件创建一个函数。

最简单的方法是将 5 个弹出窗口的 html 复制到文档底部的隐藏 div 中，您可以通过 JQuery 的 .html() 复制到该 div 中，然后在发送 @987654325 之前调用该 div 上的 .show() @ 并在之后隐藏 div。

打印按钮的 onclick 事件的函数可能是这样的：

function printpage()
{
    $('#hiddendiv').html($('#popupContact_1').html() + '<br />' +  $('#popupContact_2').html() + '<br />' +  $('#popupContact_3').html() +  '<br />' + $('#popupContact_4').html() + '<br />' +  $('#popupContact_5').html());
    $('#hiddendiv').show();
    window.print();
    $('#hiddendiv').hide();
}

在尝试此功能之前，不要忘记在文档底部使用id=hiddendiv 和style="display:none" 创建一个div，并在打印按钮的onclick 事件中调用printpage() 函数。 =)

您也可以使用 $('.a').show() 为每个弹出 div 调用 .show() 并将它们放置在页面的绝对位置 - 使用 .each 遍历它们以添加高于前一个的最高值 -在调用.print()之前。

【讨论】：

它工作得很好 :)) 非常感谢。你解决了我的问题。