CSS-Layout-Änderung für die Druckvorschau mit eckigen

Ich habe eine einzelne Seite eckige App entwickelt. Ich habe eine komplexe Ansicht, wo ich unterschiedliche Formatierungen für Seitenabzüge benötige. Es gibt eine Schaltfläche zum Drucken und wenn ich darauf geklickt habe, sollte sich das Layout ändern, um alles gut zu passen. Die Verwendung einer anderen Vorlage ist keine Option, da es einige Minuten dauert, eine humongus-Abfrage im Backend auszuführen, um die Daten abzurufen. (Auch würde es ordentlich sein, die Seite nicht zu haben, aufgefrischt nur für die Druckvorschau)CSS-Layout-Änderung für die Druckvorschau mit eckigen

Aktuelle Situation: Wenn ich klickte auf die Schaltfläche i eine Funktion auslösen einen URL-Parameter an die aktuelle URL hinzuzufügen, zu überprüfen, Wenn ich im Druckvorschau-Modus bin, kann ich mit den Browser-Steuerelementen zurückkehren, wenn ich möchte. $location.search({ 'printPreview': 'True'}); auch verwendet document.getElementById('print').style.display = 'none'; diese Fokussierung, um die Druckvorschau-Schaltfläche in der Druckansicht zu verbergen. KEIN GLÜCK! :(

Workflow:

Ich brauche Hilfe bei:.. den besten Ansatz zu verstehen, dies zu implementieren, indem Sie in der gleichen Seite bleiben alle zusätzlichen Code Hilfe wäre fantastisch sein Bitte helfen !!

Quelle

2016-05-03 CoderKK

Verwenden CSS. Kein Javascript erforderlich.

.some-class { 
    width: 40%; 
} 

@media print { 
    .no-print { 
     display: none !important; 
    } 

    .print-only { 
     display: block !important; 
    } 

    .some-class { /* width and color got changed in print */ 
     width: 60%; 
     color: #ff0 !important; 
    } 
}

HTML:

<!-- will not show up on print --> 
<div class="no-print">Click here to print</div> 

<!-- will only show up on print --> 
<div class="print-only">Page number 1/2</div>

Quelle

2016-05-03 18:44:35 Kyle

Dank! aber du brauchst Javascript, um zur normalen Ansicht zurückzukehren, oder? – CoderKK

Wenn Sie über zwei verschiedene Ansichten/Zustände sprechen, dann schlage ich vor, [ui router] (https://angular-ui.github.io/ui-router/) mit Eltern- und Kindstatus zu verwenden. '$ stateProvider.state (" main ", {templateUrl:" main.html "}). state (" main.print ", {templateUrl:" print.html "});' In diesem Fall 'main.print' ist ein Kind von 'main'. Auf diese Weise können Sie verschiedene Vorlagen verwenden und dieselben Controller verwenden. Es wird Ihnen helfen, das zu erreichen, was Sie versuchen, mit viel mehr Flexibilität. – Kyle

Sie können dynamisch das Stylesheet in Angular ziemlich leicht ändern.

<link rel="stylesheet" ng-href="{{ CurrentCSSFilename }}">

Und in Ihrem Controller:

$scope.CurrentCSSFilename = "web-view.css";

Wenn der Benutzer auf den Druckknopf klickt, läuft es eine Funktion, die die CurrentCSSFilename Umfang Variable ändert:

$scope.ClickPrint = function() { 
    $scope.CurrentCSSFilename = "print-view.css"; 
}

Quelle

2016-05-03 18:46:26

CSS-Layout-Änderung für die Druckvorschau mit eckigen

Antwort

Verwandte Themen