CSS layout change for print preview with angular

Question

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:

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

Kyle · Accepted Answer · 2016-05-03 18:44:35Z

3

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>

answered May 3, 2016 at 18:44

Kyle

5,6077 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CoderKK Over a year ago

Thanks! but you'd need javascript to go back to the normal view right?

Kyle Over a year ago

If you're talking about two different views/states, then yes, I suggest using ui router using parent and child states. $stateProvider.state("main", {templateUrl: "main.html"}).state("main.print", {templateUrl: "print.html"}); In this case, main.print is a child of main. Doing this will allow you to use different templates, while sharing the same controllers. It will help you achieve what you're trying to do with a lot more flexibility.

aman jain Over a year ago

I am trying to print a table with 50 column but on print document template it displays only 20 columns rest of all are hidden. Could you please help me how to solve this issue and display entire table's column in single row?

Dr. Cool · Accepted Answer · 2016-05-03 18:46:26Z

0

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";
}

answered May 3, 2016 at 18:46

Dr. Cool

3,7213 gold badges25 silver badges26 bronze badges

Collectives™ on Stack Overflow

CSS layout change for print preview with angular

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related