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()复制到该隐藏div，然后再调用该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()函数。 =）

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

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

1 个答案: