CODEWITHSUNDEEP
javascripthtmlcssangularjsfrontend
CoderKK
CoderKK

Reputation: 361

CSS layout change for print preview with angular

I have developed a single page angular app. I have a complex view where i need different formatting for page prints. There is a print button and when i clicked it, the layout should change to fit everything nicely. Using a different template is not an option because it takes like a minute or two to run some humongus query on the backend to fetch the data. (also it'd be neat not to have the page refreshed just for the print preview)

Current Situation: When i clicked on the button i trigger a function to add a url parameter to the current url to check if i'm in the print preview mode so i can use the browser controls to go back to if i want to. $location.search({ 'printPreview': 'True'}); also used document.getElementById('print').style.display = 'none'; this focusing to hide the print preview button on the print view. NO LUCK! :(

Workflow: enter image description here

I need help with: Understanding the best approach to implement this by staying in the same page. any additional code help would be fantastic too. Please help!!

Upvotes: 0

Views: 3431

Answers (2)

Dr. Cool
Dr. Cool

Reputation: 3721

You can dynamically change the stylesheet in Angular pretty easily.

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

And in your controller:

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

When the user clicks on the print button, it runs a function that changes the CurrentCSSFilename scope variable:

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

Upvotes: 0

Kyle
Kyle

Reputation: 5557

Use CSS. No javascript needed.

.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>

Upvotes: 3

Related Questions