Printing HTML content

Question

i have been looking around and i see that there is a lot of people with the same problem but so far no solution.

i´m working with angular 5 and angular material in a E-learning application for students and one of the function i need to implement is for printing the document, but i have not found a way to do it, if there is any way to print the content of a div in angular, because i try with this solution but doesn´t work, because when i get the innerHTML of the DOM Element, return me the html with angular the code:

                      <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><article _ngcontent-c18="" class="ng-tns-c18-3 ng-star-inserted" style="">

                        <!--bindings={
  "ng-reflect-ng-if": "false"
}-->


                        <!--bindings={
  "ng-reflect-ng-if": "false"
}-->


                        <!--bindings={
  "ng-reflect-ng-if": "true"
}--><p _ngcontent-c18="" autocorrect="off" draggable="return false;" oncut="return false" ondragover="return false;" ondrop="return false;" onkeypress="return false" onpaste="false" spellcheck="false" class="ng-tns-c18-3 ng-star-inserted" ng-reflect-ng-class="[object Object]" data-block-id="8f5b8d8f-9027-4c40-b7fe-d5ec90334fd9" contenteditable="true">Hallo Zusammen,</p>


                        <!--bindings={
  "ng-reflect-ng-if": "false"
}-->

and not the content of the container, and give me a error, any idea if there is away to this.

does not work with `window.print()`, because i need content of the document is a specific `div` container, and when i use `window.print()` i does not print the full content [like show this issue](https://github.com/angular/material2/issues/8378) but in my case only print a loading element that i use to charge the app. — Miguel Frias, May 15 '18 at 12:38
So use CSS print media, add a class and only print the content that is active — epascarello, May 15 '18 at 12:51
this not the case, using function of the window does not work in firefox only in chrome. — Miguel Frias, May 15 '18 at 13:14

Teddy Sterne · Answer 1 · 2018-05-15T19:11:46.253

I would use a directive that you can attach to a container element. The directive applies the appropriate styles so that everything outside the element is not printed and everything inside is.

Directive

@Directive({
  selector: '[print-section]',
})
export class PrintSectionDirective implements AfterViewInit, OnDestroy {
  @HostBinding('class.print-section') private printSection = true;
  private style: HTMLStyleElement;

  public ngAfterViewInit() {
    this.style = document.createElement('style');
    this.style.type = 'text/css';
    this.style.innerText = `
    @media print {
      body * {
        visibility: hidden;
      }
      .print-section, .print-section * {
        visibility: visible;
      }
      .print-section {
        width: 100%;
      }
    }`;

    document.head.appendChild(this.style);
  }

  public ngOnDestroy() {
    document.head.removeChild(this.style);
  }
}

Usage

template

<div print-section>Print only this content</div>
<button (click)="printThePage()">Print Content</button>

component

public printThePage() {
  window.print();
}

The advantages of this method is that the page will still be able to be printed with the default behavior when the directive is not used and when it is attached then only that section of the page will be printed and it will fit the width of the page.

Printing HTML content

1 Answers1

Directive

Usage

Linked