Wie drucke ich einen iFrame mit Stylesheet?

ich diesen Code erstellt haben Daten aus einem iFrameWie drucke ich einen iFrame mit Stylesheet?

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(); 
}

Dies schafft eine iFrame zu drucken, fügt einen Kopf, wo es setzt alle CSS-Links, die für diese Website benötigt werden. Dann schafft es den Körper.

Das Problem ist, wird das Styling nicht auf den Druck aufgetragen bekommen, es sei denn, ich an der Linie frame.contents() brechen. Finden („Kopf“). ReplaceWith (Kopf), was bedeutet, dass etwas in diesem Teil läuft asynchron.

Frage ist, kann ich irgendwie den Code erhalten, um kurz zu warten, bevor diese Zeile ausgeführt wird, oder gibt es vielleicht eine andere Möglichkeit, dies zu tun? Leider bin ich mit iFrames nicht so vertraut, also habe ich keine Ahnung, was es dort zu tun versucht.

Quelle

2017-07-03 Hofftari

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

@SagarSinha nicht sicher, was Sie wollen, indem Sie diese Seite verknüpfen. Könntest du vielleicht etwas mehr erklären oder kommentieren, auf welchen Teil des Themas du dich beziehst? – Hofftari

Dies erwies sich als eine echte Hektik. Ich war immer widerwillig, iframes zu verwenden, aber da es viele Ressourcen gibt, die sagen, dass wir einen Iframe verwenden, um mehr Zeug als das, was auf dem Bildschirm ist, zu drucken, dachten wir uns, wir würden es versuchen.

Dies wurde stattdessen gelöst, indem die Daten in ein verstecktes div gesetzt wurden, das dann vor einem window.print() angezeigt wurde. Zur gleichen Zeit erhielten alle anderen Elemente auf der Seite eine "verdeckte Druck" -Klasse, die wir bereits verwenden, um Elemente für Drucke auszublenden.

Dies ist möglicherweise nicht so elegant für den Benutzer (Das div wird kurz angezeigt, bevor der Benutzer den Druckdialog beendet), aber es ist ein viel einfacherer Code zu verwenden und zu verwalten.

Quelle

2017-07-04 12:10:26 Hofftari

Ich glaube, Sie könnten/sollten die letzten Aufrufe von focus() und print() in einen Onload-Handler für den Iframe verschieben, damit er nach dem Laden und Anwenden von Stilen ausgeführt wird.

Quelle

2017-07-03 13:09:23

Können Sie ein wenig erklären, wie man eine Onload-Behandlung für den Iframe durchführt? Genauer gesagt, wie man den iframe erstellt, um diesen Handler anstelle des gesamten Dokuments zu erhalten. – Hofftari

Ich habe laufen nur in der gleichen Ausgabe und tat das folgende:

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

Dieses es für mich sortiert zu haben scheint. Ich hasse die Verwendung von Timeout und die Länge ist bestenfalls raten Arbeit, aber da es nicht systemkritisch ist, ist es etwas, mit dem ich jetzt laufen kann.

Quelle

2018-02-19 11:50:11 webnoob

Wie drucke ich einen iFrame mit Stylesheet?

Antwort

Verwandte Themen