CODEWITHSUNDEEP
javascriptcssangulartypescriptprinting
Asif Zaidi
Asif Zaidi

Reputation: 93

Margin bottom not getting applied in the Print window in Angular

I have running Angular 12 application and I have integrated print functionality. I don't want to display header and footer in the print page, so I have added margin:0; I have added margin in the body, but somehow only margin-top is getting applied and not the margin-bottom.

Is there any way to add margin-bottom for every page.

Stackblitz code: https://stackblitz.com/edit/angular-ivy-oufgr5?file=src%2Fapp%2Fapp.component.html

styles.scss

@media print {
  @page {
    margin: 0;
  }

  body {
    padding-top: 1in !important;
    padding-bottom: 1in !important;
    padding-left: 0.3in !important;
    padding-right: 0.3in !important;
  }
}

enter image description here

Upvotes: 0

Views: 1475

Answers (4)

rohithpoya
rohithpoya

Reputation: 995

You can use like this, in your ts,

onPrintClicked() {
    var divContents = document.getElementById('dvContainer').innerHTML;
    var printWindow = window.open('', '', 'height=400,width=800');
    printWindow.document.write('<html><head><b>Company details</b></title>');
    printWindow.document.write(`<style>table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    
    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    
    tr:nth-child(even) {
      background-color: #dddddd;
    }</style>`);
    printWindow.document.write('</head><body>');
    printWindow.document.write(divContents);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
    // window.print();
  }

and add the table inside a div whose id is same as in the ts,

<div id="dvContainer">
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>

  ....
  Include al table rows here
  ........
 </div>

Upvotes: 0

Ale_Bianco
Ale_Bianco

Reputation: 655

You can try this:

@media print {
  @page {
    size: auto; /* auto is the initial value */

    /* this affects the margin in the printer settings */
    margin: 10mm;
  }

  body {
    /* this affects the margin on the content before sending to printer */
    margin: 0px;
  }
}

This is the updated project: https://stackblitz.com/edit/angular-ivy-yfi7us?file=src/styles.css

Upvotes: 0

M. Gallant
M. Gallant

Reputation: 294

The issue you are having is that there is only one long body spread across multiple pages, so the margin only applies on the first page.

After reading your description again, I seem to understand you want to add some margin without actually adding margins. You can cheat a little by adding dummy, space consuming content in your table header and footer. I updated the example accordingly.

Here is an example dummy page with a self generating table. If you save that in an html file and open it in your browser, when you print it, you can see that the browser "avoids" page-breaks in the "tr" and splits the table accordingly, even with margins set to 0. You can also see the dummy margins at the start and end of each page.

<head>
    <style>
        @page {
            margin: 0;
        }
        table {
            page-break-inside: auto;
            width: 100%;
        }
        .fake-margin {
            height: 100px;
        }
        tr {
            page-break-inside: avoid;
            page-break-after: auto;
        }
        td {
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <table id="example"></table>
</body>
<script>
    let a = new Array(1200).fill('<tr><td>Example 1</td><td>Example 2</td><td>Example 3</td><td>Example 4</td></tr>')
    let t = document.getElementById('example').innerHTML = '<thead><tr><th class="fake-margin" /></tr><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr></thead><tbody>' + a.join('') + '</tbody><tfoot><th class="fake-margin" /></tfoot>';
</script>

Upvotes: 0

Jayme
Jayme

Reputation: 1946

You can try this, just mess around with the values in order to get the desired result

@page {
  margin-bottom: 1cm;
  margin-top: 1cm;
}

/*You can add this as an extra for compatibility*/
@media print {
  body {
    margin-top: 1cm !important;
    margin-bottom: 1cm !important;
    margin-left: 0.3cm !important;
    margin-right: 0.3cm !important;
  }
}

Upvotes: 2

Related Questions