how to customize angular4 page print on clicking ctrl+p

Question

I have an angular4 app, on pressing ctrl+p on browser I need to customize the print page view instead default view. The page which I need to print has only angular components, I tried by writing @media print in each component css but it didn't work.

Answer 1

You have a similar case in here. They have an example on angularJS and angular.

Then, you can check the ctrl+p key press by access to this post.

Answer 2

You could simply use a plugin called printThis.js and save lots of coding time.

Add the script to your html:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.14.0/printThis.min.js"></script>

Add the print button and give it an id you'll use with printThis:

<button id="print-button-id" type="button" class="btn btn-success">Print</button>

Then use this script to print your page:

$('#print-button-id').on("click", function () {
      $('#print-section-id').printThis({
            debug: false,
            importCSS: true,
            importStyle: true,
            printContainer: true,
            loadCSS: "your-custom-style-for-printing.css",
            pageTitle: "Your print title",
            removeInline: false,
            printDelay: 333,
            header: null,
            formValues: true
      });
});

Finally, as you can see from the script, it's printing the element with the id="print-section-id", so you'll want to use in place of that the id of the element that encloses the section you want to print.