Angular Printing Best Solution - Angular 2+

Cách 1: sử dụng một id ảo

demo.component.html

2021

<div class="modal-content">
    <div id="print_demo1"> <!-- This is the div that is cloned and printed -->
        <div class="modal-header">
            <!-- HEADER CONTENT -->
        </div>
        <div class="modal-body">
            <!-- BODY CONTENT -->
            <div class="non_printable">
                <!-- Not display -->
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <!-- This is where I specify the div to print -->
        <button type="button" class="btn btn-default" onclick="print('print_demo1')">Print</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</div>

demo.component.ts

2021

  public print(id: string): boolean {
    // Create and insert new print section
    const elem = document.getElementById(id);
    const domClone = elem.cloneNode(true);
    const $printSection = document.createElement("div");
    $printSection.id = "printable";
    $printSection.appendChild(domClone);
    document.body.insertBefore($printSection, document.body.firstChild);
    window.print();
    // Clean up print section for future use
    const oldElem = document.getElementById("printable");
    if (oldElem != null) { oldElem.parentNode.removeChild(oldElem); }
    //oldElem.remove() not supported by IE
    return true;
  }

styles.scss

2021

  @media print {
    body * {
      visibility:hidden;
    }
    #printable, #printable * {
      visibility:visible;
    }
    #printable {
      position:absolute;
      left:0;
      top:0;
    }
    .non_printable {
      display: none;
    }
  }

Cách 2: chỉ gọi lệnh

dome.component.html

2021

<div class="modal-content">
    <div id="printable"> <!-- This is the div that is cloned and printed -->
        <div class="modal-header">
            <!-- HEADER CONTENT -->
        </div>
        <div class="modal-body">
            <!-- BODY CONTENT -->
            <div class="non_printable">
                <!-- Not display -->
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <!-- This is where I specify the div to print -->
        <button type="button" class="btn btn-default" onclick="print()">Print</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</div>

demo.component.ts

2021

  public print(): void {
    window.print();
  }

styles.scss

2021

  @media print {
    body * {
      visibility:hidden;
    }
    #printable, #printable * {
      visibility:visible;
    }
    #printable {
      position:absolute;
      left:0;
      top:0;
    }
    .non_printable {
      display: none;
    }
  }