如何使用样式表打印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链接。然后它创建身体。

问题是，造型不会适用于打印，除非我在第行break.contents（）。find（“head”）。replaceWith（head），这意味着该部分正在异步运行。

问题是，我可以以某种方式获得代码在运行该行之前等待一段时间，或者可能有另一种方法来执行此操作？不幸的是，我并不熟悉iFrames，所以我不知道它在尝试做什么。

https://stackoverflow.com/questions/9616426/javascript-print-iframe-contents-only –

@SagarSinha不知道你想要通过链接该页面。你能否解释一些更多的或评论你想要参考的那个线索的哪一部分？ – Hofftari

答

这原来是一个真正的麻烦。我一直都不愿意使用iframe，但是由于有很多资源说使用iframe打印比屏幕上显示的东西更多的东西，我们认为我们会尝试一下。

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

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

答

我认为你可以/应该将最后一次focus（）和print（）调用移动到iframe的onload处理函数中，以便在样式被加载和应用后发生。

你能否解释一下如何为iframe做一个onload处理？更确切地说，如何真正让iframe获得这个处理程序而不是整个文档。 – Hofftari

答

我刚刚碰到同样的问题，做了以下内容：

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

这似乎已经整理对我来说。我讨厌使用超时，长度猜测工作最好，但因为它不是系统的关键，这是我现在可以运行的东西。

如何使用样式表打印iFrame？

相关推荐