1

I am trying to print the receipt page below. It looks like as below in the browser. The content in the middle(with white background) has fixed width and is centered. I am using angular 7 and bootstrap 4

enter image description here

When i try to print it from my code using window.print() , the width of the content doesn't show correctly. The content which is in the white background takes full width of the page when in print mode. Below is how it shows in the print preview in chrome. I want the print preview to be similar as it was in the browser.

enter image description here

Below are the scss i am using

  1. For the grey background

     .background {
      height:100%;
      width: 100%;
      background-color: #E9E8EA; //Grey
      margin: 0px;
      padding: 0px;  
 }

  2. For the receipt content in the middle 

      .content {    
        height: 85.33%; 
        width: 35.95%; 
        border-radius: 5px;
        background-color: #FFFFFF; //white  
        padding-top: 1.47%;
        padding-bottom: 2.21%;    
    }

I would really appreciate if someone gives me idea on this.

Nova
  • 364
  • 1
  • 15
Ben
  • 137
  • 3
  • 12

1 Answers1

1

You need to use @page or @media print in your css.

https://www.sitepoint.com/css-printer-friendly-pages/

Nova
  • 364
  • 1
  • 15
  • I tried by enclosing all my css inside `@media print{ ...}` and no luck. It didn't work with `@page` also. – Ben Dec 16 '19 at 04:01
  • 1
    You may have duplicate classes in your css. Try `!important` – Nova Aug 20 '20 at 08:13