Drucken Sie ein Div mit Javascript in angularJS einzelne Seite Anwendung

Ich habe eine einzelne Seite Web-Anwendung mit angularJS. Ich muss ein div bestimmter Seite drucken. Ich habe versucht, die folgenden:Drucken Sie ein Div mit Javascript in angularJS einzelne Seite Anwendung

Die Seite einige div enthält (print.html)

<div> 
    <div> 
    Do not print 
    </div> 
    <div id="printable"> 
    Print this div 
    </div> 
    <button ng-click="printDiv('printableArea');">Print Div</button> 
</div>

Der Controller folgende Skript hat:

$scope.printDiv = function(divName) { 
    var printContents = document.getElementById(divName).innerHTML; 
    var originalContents = document.body.innerHTML;   
    document.body.innerHTML = printContents; 
    window.print(); 
    document.body.innerHTML = originalContents; 
}

Dieser Code druckt die gewünschten div aber es gibt eine Problem. Die Anweisung document.body.innerHTML = originalContents; ersetzt den Körper der gesamten Anwendung, da es ein SPA ist. Wenn ich also die Seite aktualisiere oder erneut auf die Druckschaltfläche klicke, wird der gesamte Inhalt der Seite gelöscht.

Quelle

2014-03-05 Priyatam Roy

Bitte eine Geige mitnehmen. – Quinn

$scope.printDiv = function(divName) { 
    var printContents = document.getElementById(divName).innerHTML; 
    var popupWin = window.open('', '_blank', 'width=300,height=300'); 
    popupWin.document.open(); 
    popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</body></html>'); 
    popupWin.document.close(); 
}

Quelle

2014-03-05 05:49:46

Cool, es funktioniert :) –

Alle '$ http' Anfragen bremst nach diesem ... :(Auch kann ich Seite nicht neu laden ... nur URL auf neue Registerkarte kopieren funktioniert ... Ich kann nicht verstehen, warum .. –

Das gleiche hier, alle $ http Anfrage Bremsen aber nur mit Chrome passieren, wenn ich das neue Fenster schließe Firefox oder IE funktioniert gut –

Zwei bedingte Funktionen sind erforderlich: eine für Google Chrome und eine zweite für die übrigen Browser.

$scope.printDiv = function (divName) { 

    var printContents = document.getElementById(divName).innerHTML; 
    var originalContents = document.body.innerHTML;  

    if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { 
     var popupWin = window.open('', '_blank', 'width=600,height=600,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no'); 
     popupWin.window.focus(); 
     popupWin.document.write('<!DOCTYPE html><html><head>' + 
      '<link rel="stylesheet" type="text/css" href="style.css" />' + 
      '</head><body onload="window.print()"><div class="reward-body">' + printContents + '</div></html>'); 
     popupWin.onbeforeunload = function (event) { 
      popupWin.close(); 
      return '.\n'; 
     }; 
     popupWin.onabort = function (event) { 
      popupWin.document.close(); 
      popupWin.close(); 
     } 
    } else { 
     var popupWin = window.open('', '_blank', 'width=800,height=600'); 
     popupWin.document.open(); 
     popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>'); 
     popupWin.document.close(); 
    } 
    popupWin.document.close(); 

    return true; 
}

Quelle

2014-07-09 20:51:16

Warum haben Sie 'onbeforeunload' und' originalContents'? Außerdem fehlen Ihnen die '' Tags aus den' popupWin.document.write' Zeilen. – Trisped

Sehr schön danke, nur eine ungenutzte Variable: 'originalContents' –

Sie jetzt die Bibliothek namens

angular-print

Quelle

2015-09-04 07:23:53 TMichel

Diese Bibliothek ist in Bewegung, ich würde vorsichtig sein, es in der Produktion zu verwenden, bis einige der Probleme gelöst werden –

@ G.Mart Offenbar treibt der Autor ein [ Hauptversion] (https://github.com/samwiseduzer/angularPrint/issues/7#issuecomment-163067195) dieses Wochenende die Cross-Browser-Kompatibilität zu lösen – TMichel

Von dem Autor, vor 3 Tagen: "Yeah, ich bin wirklich Entschuldigung für den Mangel an Updates auf Multi-Browser-Kompatibilität.Ich hoffe, eine neue Version an diesem Wochenende, die Chrome, Mozilla und Safari unterstützt.Edge wird meist unterstützt werden, kann aber immer noch einen Bug oder zwei.chrome, Mozilla und Safari. Edge wird meistens unterstützt, kann aber immer noch einen oder zwei Fehler enthalten. " –

Dies ist, was für mich in Chrome und Firefox gearbeitet verwenden können! Dies öffnet das kleine Druckfenster und schließt es automatisch, nachdem Sie auf Drucken geklickt haben.

var printContents = document.getElementById('div-id-selector').innerHTML; 
      var popupWin = window.open('', '_blank', 'width=800,height=800,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no,top=50'); 
      popupWin.window.focus(); 
      popupWin.document.open(); 
      popupWin.document.write('<!DOCTYPE html><html><head><title>TITLE OF THE PRINT OUT</title>' 
            +'<link rel="stylesheet" type="text/css" href="app/directory/file.css" />' 
            +'</head><body onload="window.print(); window.close();"><div>' 
            + printContents + '</div></html>'); 
      popupWin.document.close();

Quelle

2016-06-28 19:38:10 tyborg

ich auf diese Weise getan:

$scope.printDiv = function (div) { 
    var docHead = document.head.outerHTML; 
    var printContents = document.getElementById(div).outerHTML; 
    var winAttr = "location=yes, statusbar=no, menubar=no, titlebar=no, toolbar=no,dependent=no, width=865, height=600, resizable=yes, screenX=200, screenY=200, personalbar=no, scrollbars=yes"; 

    var newWin = window.open("", "_blank", winAttr); 
    var writeDoc = newWin.document; 
    writeDoc.open(); 
    writeDoc.write('<!doctype html><html>' + docHead + '<body onLoad="window.print()">' + printContents + '</body></html>'); 
    writeDoc.close(); 
    newWin.focus(); 
}

Quelle

2016-08-02 06:50:34 Azhar

-2

Ich glaube nicht, dass es keine Notwendigkeit dieses viel große Codes zu schreiben.

Ich habe gerade Winkeldruck Bower-Paket installiert und alles ist bereit zu gehen.

Gerade in Modul injizieren und Sie sind alle zu gehen Verwendung vorgefertigte Druck Richtlinien gesetzt & Spaß ist, dass Sie auch einige div verbergen können, wenn Sie nicht wollen, drucken

http://angular-js.in/angularprint/

Mine funktioniert super.

Quelle

2017-06-30 12:43:05

Dies liefert keine Antwort auf die Frage. Sobald Sie genug [Reputation] (https://stackoverflow.com/help/whats-reputation) haben, können Sie [jeden Beitrag kommentieren] (https://stackoverflow.com/help/privileges/comment); Stellen Sie stattdessen Antworten bereit, die [keine Klärung durch den Fragesteller erfordern] (https://meta.stackexchange.com/questions/214173/why-doe-i-need-50-reputation-to-comment-what-can- i-do-stattdessen). – GrumpyCrouton

Danke für den Rat, aber ich denke, die Antwort ist sehr genau. Und es funktioniert 100%. –

Es gibt auch schon eine Antwort, die im Grunde die gleiche ist wie deine, also fügt deine nichts zu diesem Thread hinzu. Ich würde sogar sagen, dass diese andere Antwort ungültig ist, da es _nur eine Verbindung zu einer externen Quelle_ ist, die vom Thema abweichen könnte, und wenn diese Verbindung Ihre Antwort bricht und ihre Antwort beide gebrochen sind, weil Ihre Antwort der Link ist. – GrumpyCrouton

Drucken Sie ein Div mit Javascript in angularJS einzelne Seite Anwendung

Antwort

Verwandte Themen