0

我在 SO 中使用先前的问题来帮助我使用这个“open-in-new-window”javascript 函数：

将 div 和他的样式复制到新窗口

所以我的目标是在新窗口中打开一个内联 div，然后能够打印新窗口（我想在新窗口中打开的 div 是一张优惠券）。

我已经完成了 div 的样式（看起来像优惠券）并设置了 javascript，以便 div 确实在新窗口中打开，但是

1) ...我无法让样式表链接到新窗口，

2) ...而且，我无法打印新窗口（相反，当我单击打印新窗口时没有任何反应 - 但是当我关闭新窗口时，会出现打印对话框。

这是我到目前为止使用的代码，非常感谢任何帮助：

$('#printCoupon').bind('click', function () {
    var printContents = new $("#coupon").clone();           
    var myWindow = window.open("", "popup", "width=600,height=380,scrollbars=yes,resizable=yes," +
"toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0");
    var doc = myWindow.document;
    doc.open();
$(printContents).find("#printCoupon").remove();
    doc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
    doc.write("<html>");
    doc.write("<head>");
    doc.write("<link href='http://[link-to-css]/css/coupon.css' rel='stylesheet' type='text/css' />"); // your css file comes here.
    doc.write("</head>");
    doc.write("<body>");
    doc.write($(printContents).html());
    doc.write("</body>");
    doc.write("</html>");
});

和我的html：

<div id="couponWrap">
    <div id="coupon">
        <h3>Coupon Title</h3>
        <p>Present this coupon and receive $10 off labor on your first service visit and 2% loyalty points on you next visit.</p>
    </div>
        <a href="javascript:;" id="printCoupon">Click to print this coupon.</a>
</div>

谢谢你，辛迪

4

3 回答 3

0

到目前为止，这是我的解决方案 - javascript 在新窗口中打开时从 HTML 中剥离了 div，所以我只是将 div 重写回新窗口：

（当内联 DIV 在同一个网页上时，有谁知道如何编写 javascript 在新窗口中打开多个内联 DIV？我需要动态生成 ID，我相信下面的代码和 HTML。）

    $('#printCoupon').bind('click', function () {
var printContents = new $("#coupon").clone();           
var myWindow = window.open("width=600,height=380");
var doc = myWindow.document;
    $(printContents).find("#printCoupon").remove();
doc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
doc.write("<html>");
doc.write("<head>");
doc.write("<link href='http://linktocssfile.css' rel='stylesheet' type='text/css' />"); // your css file comes here.
doc.write("</head>");
doc.write("<body>");
doc.write("<div id='coupon'>");
doc.write($(printContents).html());
doc.write("</div>");
doc.write("</body>");
doc.write("</html>");
});
于 2014-03-12T12:44:29.810 回答
0

至于写作，请尝试以下（删除doc.open()和删除的popup论点）：

$('#printCoupon').bind('click', function () {
    var printContents = new $("#coupon").clone();           
    var myWindow = window.open("", "", "width=600,height=380,scrollbars=yes,resizable=yes," +
"toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0");
    var doc = myWindow.document;
$(printContents).find("#printCoupon").remove();
    doc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
    doc.write("<html>");
    doc.write("<head>");
    doc.write("<link href='http://[link-to-css]/css/coupon.css' rel='stylesheet' type='text/css' />"); // your css file comes here.
    doc.write("</head>");
    doc.write("<body>");
    doc.write($(printContents).html());
    doc.write("</body>");
    doc.write("</html>");
});
于 2014-03-10T19:27:16.743 回答
0

您是否根据您的样式是否特定于元素检查了任何问题@media print？回到您在示例基础上提供的参考资料。其他人对此发表了评论-也许这是您的问题：

这取决于 div 的样式。如果样式是基于 ID 或类应用的，那么在新窗口中包含相同的样式表应该没问题。但是，如果任何样式基于元素的祖先，那么它就会变得棘手，因为您必须复制祖先元素才能应用确切的样式。

听起来您应该使用特定于打印的样式。您只能通过在样式表链接上包含 media="screen" 属性来应用样式表进行打印。然后，此样式表负责隐藏页面中您不想打印的任何元素并定位您要打印的元素。这样您就不会受到弹出窗口阻止程序的影响，并且可以让用户少一步来打印文档。

于 2014-03-10T19:44:47.150 回答