如何使用样式表打印 iFrame？答案

【问题标题】：How to print an iFrame with stylesheet?如何使用样式表打印 iFrame？
【发布时间】：2017-12-06 16:46:25
【问题描述】：

我创建了这段代码来打印 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().find("head").replaceWith(head) 行中断，这意味着该部分中的某些内容正在异步运行。

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

【问题讨论】：

stackoverflow.com/questions/9616426/…
@SagarSinha 通过链接该页面不确定您想要什么。您能否进一步解释或评论您要引用该线程的哪一部分？

标签： javascript jquery css iframe

【解决方案1】：

结果证明这是一个真正的麻烦。我一直不太愿意使用 iframe，但由于有很多资源说使用 iframe 打印的内容比屏幕上的内容多，所以我们想尝试一下。

这个问题是通过将数据放在一个隐藏的 div 中来解决的，然后在 window.print() 之前显示该 div。同时，页面上的所有其他元素都被赋予了一个“hidden-print”类，这是我们已经用来隐藏打印元素的类。

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

【讨论】：

【解决方案2】：

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

【讨论】：

您能解释一下如何对 iframe 进行加载处理吗？更准确地说，如何真正让 iframe 获取此处理程序而不是整个文档。
举个例子就好了

【解决方案3】：

我刚刚遇到了同样的问题并做了以下操作：

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

这似乎已经为我整理好了。我讨厌使用超时，而且长度充其量只是猜测工作，但由于它不是系统关键，所以我现在可以运行它。

【讨论】：