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

Question

我正在开发一个简单的基于jQuery的Web应用程序计算器，其中将显示5个带有其内容的弹出窗口。 但是最后当我单击主窗口的打印按钮时，仅打印出主窗口的内容。 但是我需要将所有弹出窗口的内容与主窗口一起打印。 我已经在Google上进行了搜索，但没有得到有效的答案。

这是我的打印功能：

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

Answer 1

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

您可以采用多种形式来完成此操作，对于所有这些形式，您最有可能必须为打印按钮的onclick事件创建一个函数。

最简单的方法是将5个弹出窗口的html复制到文档底部的隐藏div内，您可以通过JQuery的.html()复制到其中，然后在发送window.print()之前在该div上调用.show() 。 window.print()并在之后隐藏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() .show()为每个弹出式div调用.show()并将它们放置在页面的绝对位置-使用.each遍历它们以添加最高值比上一个更高-调用.print() 。