logo标签列表

使用JQuery打开弹出窗口并打印

javascriptjqueryprintingpopuplightbox
16

前段时间我使用jQuery创建了一个轻量级的lightbox插件，它可以将链接中指定的url加载到lightbox中。代码非常简单：

$('.readmore').each(function(i){
    $(this).popup();
});

链接将会是这个样子：

<a class='readmore' href='view-details.php?Id=11'>TJ Kirchner</a>

这个插件还可以接受宽度、高度、不同的url和更多要传递的数据等参数。

我现在面临的问题是如何打印灯箱。我设置了灯箱顶部有一个打印按钮。这个链接会打开一个新窗口并打印该窗口。所有这些都由灯箱插件控制。代码如下：

$('.printBtn').bind('click',function() {
    var url = options.url + ( ( options.url.indexOf('?') < 0 && options.data != "" ) ? '?' : '&' ) + options.data;
    var thePopup = window.open( url, "Member Listing", "menubar=0,location=0,height=700,width=700" );
    thePopup.print();
});
问题在于脚本似乎没有等待窗口加载。它想要在窗口出现的一瞬间就打印。因此，如果我点击“取消”以关闭打印对话框，它会一遍又一遍地弹出，直到窗口加载完成。第一次尝试打印时，我得到了一个空白页面，可能是因为窗口没有完成加载。我需要找到一种方法来修改之前的代码块，等待窗口加载完成后再进行打印。我觉得应该有一种简单的方法可以做到这一点，但我还没有找到它。或者，我需要找到一种更好的方法，在父窗口中从灯箱脚本打开弹出窗口并进行打印，而不会改变弹出窗口中的网页代码。
3个回答
33
你应该将print函数放在你的view-details.php文件中，并在文件加载完成后调用它，可以使用以下方法：
<body onload="window.print()">
或者
$(document).ready(function () { 
  window.print(); 
});
1
好的，我正在尝试在不向view-details.php文件添加代码的情况下完成此操作，因为该文件不需要知道它正在被打印。这样，我就不必向加载到灯箱中的每个文件添加一小段代码了。 - TJ Kirchner
如果您在Lightbox中加载它，为什么要使用window.open？如果您正在使用jQuery通过AJAX加载HTML，则可以在jQuery中使用.load()函数，并使用onSuccess回调触发打印。 - Ivo Sabev
因为我无法从灯箱中很好地打印。周围都是黑色背景，看起来在自己的窗口中更好看，也更容易打印。使用.load()是一个有趣的想法，但我不希望内容在灯箱加载后立即打印。只有当用户单击打印链接时，我才希望打印该框。 - TJ Kirchner
您可以将打印按钮禁用，在 .load() 的 onSuccess 回调函数中启用它，以确保页面加载完成之前没有人进行打印。 - Ivo Sabev
8

明白了！我在这里找到了一个想法

http://www.mail-archive.com/discuss@jquery.com/msg18410.html

在这个例子中，他们将一个空的弹出窗口加载到对象中，克隆要显示的元素的内容，并将其附加到对象的主体上。由于我已经知道 view-details（或者我在 lightbox 中加载的任何页面）的内容，所以我只需要克隆该内容并将其加载到对象中。然后，我只需要打印该对象。最终结果如下：

$('.printBtn').bind('click',function() {
    var thePopup = window.open( '', "Customer Listing", "menubar=0,location=0,height=700,width=700" );
    $('#popup-content').clone().appendTo( thePopup.document.body );
    thePopup.print();
});

我在view-details.php中使用的样式表使用了相对链接，这是我的一个小缺点。我不得不将其更改为绝对链接。原因是该窗口没有与之关联的URL，因此它没有相对位置可供绘制。

在Firefox中工作正常。我还需要在其他主要浏览器中进行测试。

我不知道在处理图像、视频或其他处理密集型解决方案时，这种解决方案的效果如何。尽管在我的情况下，它的效果非常好，因为我只是加载表格和文本值。

感谢您的建议！您给了我一些绕过此问题的想法。

0
你确定无法更改弹出窗口中的HTML吗？
如果可以，请在弹出窗口的HTML末尾添加一个
我不想更改弹出窗口中的HTML代码...但也许我可以将onload="window.print()"附加到正在加载的HTML上...让我稍微尝试一下这个想法。 - TJ Kirchner
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接