如何使用样式表打印 iFrame？
Posted
技术标签:
【中文标题】如何使用样式表打印 iFrame？【英文标题】：How to print an iFrame with stylesheet? 【发布时间】：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 不是很熟悉，所以我不知道它在那里试图做什么。
【问题讨论】：
***.com/questions/9616426/… @SagarSinha 通过链接该页面不确定您想要什么。您能否进一步解释或评论您要引用该线程的哪一部分？ 【参考方案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)
这似乎已经为我整理好了。我讨厌使用超时，而且长度充其量只是猜测工作，但由于它不是系统关键，所以我现在可以运行它。
【讨论】：
以上是关于如何使用样式表打印 iFrame？的主要内容，如果未能解决你的问题，请参考以下文章
如何将外部样式表和 javascript 导入 iframe
如何使用 jquery 从 IFrame 本身更改 IFrame 样式？