Question

我已创建此代码以打印来自iFrame的数据

function (data) {
    var frame = $("<iframe>", {
        name: "iFrame",
        class: "printFrame"
    });

    frame.appendTo("body");

    var head = $("<head></head>");

    _.each($("head link[rel=stylesheet]"), function (link) {
        var csslink = $("<link/>", { rel: "stylesheet", href: $(link).prop("href") })
        head.append(csslink);
    ;});

    frame.contents().find("head")
        .replaceWith(head);

    frame.contents().find("body")
        .append(this.html());

    window.frames["iFrame"].focus();
    window.frames["iFrame"].print();
}

这会创建一个iFrame，为它设置此网站所需的所有css链接添加一个头。然后它创造了身体。

麻烦的是，样式将不会应用于打印，除非我在行 frame.contents（）。中查找（“head”）。replaceWith（head），这意味着该部分中的某些东西是异步运行的。

问题是，我可以以某种方式让代码在运行该行之前等待一会儿，或者是否有其他方法可以做到这一点？不幸的是，我对iFrames并不熟悉，所以我不知道它在那里做什么。

Answer 1

我认为您可以/应该将最后一个focus（）和print（）调用移动到iframe的onload处理程序，以便在加载和应用样式后实现它。

Answer 2

事实证明这是一个真正的麻烦。我一直不愿意使用iframe，但由于有很多资源说使用iframe打印的内容比屏幕上的内容更多，我们认为我们试一试。< / p>

这是通过将数据放在隐藏的div中来解决的，然后在window.print（）之前显示。同时，页面上的所有其他元素都被赋予了＆＃34; hidden-print＆＃34; class，这是我们已经用来隐藏打印元素的类。

这对用户来说可能不那么优雅（div会在用户退出打印对话框之前短暂显示），但这样可以使用和管理更简单的代码。

Answer 3

我刚遇到同样的问题并做了以下事情：

setTimeout(() => {
  window.frames["iFrame"].focus();
  window.frames["iFrame"].print();
}, 500)

这似乎已经为我排序了。我讨厌使用超时，长度是猜测最好但是因为它不是系统关键的，所以我现在可以运行它。

如何使用样式表打印iFrame？

3 个答案: