Can we print some div of a page?

Question

I want to create a print button so I can print my page content, except the print preview is not what I would like to print at all.

I would like to print only this visualization

When I click the print button it also shows me the sidebar.

Do you think it is possible to retrieve some div? Because I don't know how to do this.

<div class="home-content wrapper-component ">
   <!-- Portfolio Securities-->
   <h1 class="text-center pt-4 pb-3">Portfolio Securities</h1>
   <div class="card">
      <div class="card-body">
         <div class="row">
            <div class="col">
               <div class="text-end">
                  <!-- Print -->
                  <button type="button" class="btn btn-secondary mb-2" (click)="printPage()">Print</button>
               </div>
            </div>
         </div>
         <table class="table table-bordered table-striped table-hover">
            <thead>
               <tr class="text-center">
                  <!-- Amount -->
                  <th scope="col">Amount</th>
                  <!-- Denomination -->
                  <th scope="col">Denomination</th>
                  <!-- Dev -->
                  <th scope="col">Dev</th>
                  <!-- Course -->
                  <th scope="col">Course</th>
                  <!-- Average -->
                  <th scope="col">Average</th>
                  <!-- Var en % -->
                  <th scope="col" colspan="2">Var en %</th>
                  <!-- Interest -->
                  <th scope="col">Interest</th>
                  <!-- Estimation -->
                  <th scope="col">Estimate</th>
                  <!-- Weight -->
                  <th scope="col">Weight</th>
                  <!-- Variation -->
                  <th scope="col">Variation</th>
                  <!-- Order -->
                  <th scope="col">Order</th>
               </tr>
            </thead>
            <tbody>
               <ng-container *ngFor="let instrument of instruments">
                  <ng-container *ngIf="instrument.TYPEVALUE === 11 || instrument.TYPEVALUE === 21 || instrument.TYPEVALUE === 31">
                     <tr class="background-green-light">
                        <td colspan="9" class="uppercase-title"> {{ instrument.ASSETCATLABEL }} </td>
                        <td class="text-end"> {{ instrument.AMOUNT | FormatNum:'1.2-2' }}%</td>
                        <td class="text-end"> {{ instrument.PERCENTAGE | FormatNum:'1.2-2' }} %</td>
                        <td></td>
                     </tr>
                  </ng-container>
                  <ng-container *ngFor="let item of instrument.ELEMENT">
                     <tr>
                        <td class="text-end"><a [routerLink]="[ '/portfolio/stocks_movement/' + item.SVM] ">{{ item.QUANTITY | FormatNum:'1.2-2' }}</a></td>
                        <td class="text-start"><a [routerLink]="[ '/markets/details/' + item.SVM] "> {{ item.LABEL }}</a></td>
                        <td class="text-end">{{ item.CURRENCYVALO }}</td>
                        <td class="text-end">{{ item.LASTPRICE | FormatNum:'1.2-2' }}</td>
                        <td class="text-end"><a [routerLink]="[ '/portfolio/stocks_movement/moyen/' + item.SVM ] ">{{ item.AVERAGEDPRICE | FormatNum:'1.2-2' }}</a></td>
                        <td class="text-center vertical-center">
                           <span [ngClass]="[item.PRICEVARIATION >= 0 ? 'positive-arrow' : 'negative-arrow']"></span>
                           <span [ngClass]="item.PRICEVARIATION | positiveNegativeColorClass"></span>
                        </td>
                        <td class="text-end"> {{ item.PRICEVARIATION | mathAbs | FormatNum:'1.2-2' }} %</td>
                        <td class="text-end">{{ item.ACCRUEDINTERESTS | FormatNum:'1.2-2' }} </td>
                        <td class="text-end">{{ item.VALORIZATION | FormatNum:'1.2-2' }}</td>
                        <td class="text-end w7">{{ item.PERCENTAGE | FormatNum:'1.2-2' }} %</td>
                        <td class="text-end">
                           <span *ngIf="!devise" [ngClass]="item.DIFFEREUR | positiveNegativeColorClass">
                           {{ item.DIFFEREUR | FormatNum: "1.2-2" }}&nbsp;{{ item.CURRENCYVALO   }}
                           </span>
                           <span *ngIf="devise" [ngClass]="item.DIFFEREUR | positiveNegativeColorClass">
                           {{ item.DIFFEREUR | FormatNum: "1.2-2"}}&nbsp;EUR
                           </span>
                        </td>
                        <td class="text-center">
                           <!-- Sale-->
                           <button type="button" *ngIf="hasAccess$ | async" [routerLink]="['/orders/newOrder/' + item.SVM]" class="btn btn-success outline">Sale</button>
                        </td>
                     </tr>
                  </ng-container>
                  <ng-container *ngIf="instrument.TYPEVALUE === 92">
                     <tr>
                        <td colspan="11" class="uppercase-title"> {{ instrument.ASSETCATLABEL }} </td>
                     </tr>
                     <tr *ngFor="let item of instrument.ELEMENT">
                        <td class="text-end"><a [routerLink]="[ '/portfolio/stocks_movement/' + item.SVM] ">{{ item.QUANTITY | FormatNum:'1.2-2' }}</a></td>
                        <!-- Coupon -->
                        <!-- Title -->
                        <td colspan="10">Coupon {{ item.COUPONNUMBER }} title {{ item.LABEL }} </td>
                     </tr>
                  </ng-container>
               </ng-container>
            </tbody>
         </table>
      </div>
   </div>
</div>
<div class="pb-3"></div>

My TS file

printPage() {
  window.print();
}

Answer 1

In CSS you can target the print mode, and hide anything you don't want on the final result. In a global CSS file :

@media print {
  .hide-on-print {
    display: none;
  }
}