我创建了这段代码来打印来自 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 链接的位置添加一个 head。然后它创建 body 。
问题是，样式不会应用于打印，除非我在 frame.contents().find("head").replaceWith(head) 行中断，这意味着该部分中的某些内容正在异步运行。
问题是，我能否以某种方式让代码在运行该行之前等待一小段时间，或者是否有其他方法可以做到这一点？不幸的是，我对 iFrame 不是很熟悉，所以我不知道它试图在那里做什么。
最佳答案
事实证明这是一个真正的麻烦。我一直不愿意使用 iframe，但由于有很多资源表明使用 iframe 可以打印比屏幕上显示的内容更多的内容，我们认为我们可以尝试一下。
解决方法是将数据放入隐藏的 div 中，然后在 window.print() 之前显示。同时，页面上的所有其他元素都被赋予了一个“隐藏打印”类，我们已经使用该类来隐藏打印元素。
这对用户来说可能不太优雅(div 将在用户退出打印对话框之前短暂显示)，但这是一种使用和管理代码更简单的方法。
关于javascript - 如何使用样式表打印 iFrame？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44885172/