How to print HTML content in angular8 project?

Question

I want to print just the chart but when I click to the button it prints to all of the window (with buttons and icons)

the code is app.component.ts

  OnPrint() {

    window.print();
  }

styles.css

    @media print {
    
      body * {
    
        visibility: visible;
    
      }
    
      #section-to-print, #section-to-print * {
    
        visibility: visible;
    
      }
      :host {
        display: none;
      }
    
      #section-to-print {
    
        position: absolute;
    
        left: 0;
    
        top: 10px;
        width: 230px;
        height: 330px;
    
      }
    
    }
    
    body{
      margin: 10px;
    }
    
    *{
      box-sizing: border-box;
    }

Does this answer your question? [How to print HTML content on click of a button, but not the page?](https://stackoverflow.com/questions/16894683/how-to-print-html-content-on-click-of-a-button-but-not-the-page) — BatshevaRich, Jun 23 '20 at 11:11

BatshevaRich · Answer 1 · 2020-06-23T11:38:43.387

-1

Wrap the section you want to print in a div, and send the divs id to the function.

<div id="sectionToPrint">
      ////
</div>

<input type="button" (click)="onPrint('sectionToPrint')" value="print a div!" />

Then add an event like an onclick (as shown above), and pass the id of the div like above.

Now create a really simple javascript:

onPrint(divName) {
     const printContents = document.getElementById(divName).innerHTML;
     const originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;
}

SOURCE : https://stackoverflow.com/a/7532581/1223045 There are other ways to achieve what you are trying to do, but I feel this is the easiest way.

edited Jun 23 '20 at 11:38

answered Jun 23 '20 at 11:11

BatshevaRich

550
7
19

@chaabaninejma changed it to typescript. hope this is helpful. – BatshevaRich Jun 23 '20 at 11:43
@chaabaninejma please mark this answer as correct if it is what you're looking for :) – BatshevaRich Jun 25 '20 at 13:10
3

@chaabaninejma code is messy. after print, the page becomes unusable. you cannot click anywhere. If you click cancel print, page become unusable as well – LeoGarcia Apr 12 '21 at 02:12

How to print HTML content in angular8 project?

1 Answers1