wake-up-neo.com

Drucken Sie ein div mit Javascript in einer einseitigen Anwendung von angleJS

Ich habe eine Einzelseiten-Webanwendung, die angleJS verwendet. Ich muss ein Div einer bestimmten Seite ausdrucken ... Ich habe folgendes versucht:

Die Seite enthält einige div (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 verfügt über folgendes Skript:

$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 gibt das gewünschte div aus, aber es liegt ein Problem vor. Die Anweisung document.body.innerHTML = originalContents; ersetzt den Rumpf der gesamten Anwendung, da es sich um ein SPA handelt. Wenn ich also die Seite aktualisiere oder erneut auf die Schaltfläche "Drucken" klicke, wird der gesamte Inhalt der Seite gelöscht.

32
Priyatam Roy
$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();
} 
88
Anand Natarajan

Es werden zwei bedingte Funktionen benötigt: eine für Google Chrome und eine 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;
}
10
Amit Jadli

Sie können jetzt die Bibliothek mit dem Namen angle-print verwenden.

7
TMichel

Ich habe diesen Weg gemacht:

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

Dies hat bei mir in Chrome und Firefox funktioniert! Dadurch wird das kleine Druckfenster geöffnet und automatisch geschlossen, sobald 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();
0
tyborg

Okay, ich könnte einen anderen Ansatz haben.

Ich bin mir bewusst, dass es nicht für jeden geeignet ist, aber trotzdem wird es für jemanden nützlich sein.

Für diejenigen, die kein neues Fenster suchen wollen und sich wie ich über css-Stile Gedanken machen, habe ich mir folgendes ausgedacht:

Ich habe die Ansicht meiner App in einen zusätzlichen Container verpackt, der beim Drucken ausgeblendet wird, und es gibt einen zusätzlichen Container für das, was gedruckt werden muss. Dieser wird beim Drucken angezeigt.

Unten arbeitsbeispiel:

var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {
  
    $scope.people = [{
      "id" : "000",
      "name" : "alfred"
    },
    {
      "id" : "020",
      "name" : "robert"
    },
    {
      "id" : "200",
      "name" : "me"
    }];

    $scope.isPrinting = false;
		$scope.printElement = {};
		
		$scope.printDiv = function(e)
		{
			console.log(e);
			$scope.printElement = e;
			
			$scope.isPrinting = true;
      
      //does not seem to work without toimeouts
			setTimeout(function(){
				window.print();
			},50);
			
			setTimeout(function(){
				$scope.isPrinting = false;
			},50);
			
			
		};
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

	<div ng-show="isPrinting">
		<p>Print me id: {{printElement.id}}</p>
    <p>Print me name: {{printElement.name}}</p>
	</div>
	
	<div ng-hide="isPrinting">
    <!-- your actual application code -->
    <div ng-repeat="person in people">
      <div ng-click="printDiv(person)">Print {{person.name}}</div>
    </div>
  </div>
  
  
</div>
	

Beachten Sie, dass mir bewusst ist, dass dies keine elegante Lösung ist, und dass es einige Nachteile hat, aber es hat auch einige Nachteile:

  • braucht kein Popup-Fenster
  • hält die CSS intakt
  • speichert Ihre gesamte Seite nicht in einer var (aus welchem ​​Grund auch immer Sie dies nicht tun möchten)

Nun, wer auch immer Sie dies lesen, hat einen schönen Tag und schreibt weiter :)

BEARBEITEN:

Wenn es zu Ihrer Situation passt, können Sie tatsächlich Folgendes verwenden:

@media print  { .noprint  { display: none; } }
@media screen { .noscreen { visibility: hidden; position: absolute; } }

anstelle von eckigen Booleans, um Ihren Druck- und Nichtdruckinhalt auszuwählen

BEARBEITEN:

Das Bildschirm-CSS wurde geändert, da diese Anzeige erscheint: Keiner bricht das Drucken beim ersten Drucken nach dem Laden/Aktualisieren einer Seite.

sichtbarkeit: Verborgener Ansatz scheint bisher zu funktionieren.

0
Kamil Wężyk