целевой счетчик не работает при печати в Angular 7

Question

Я пытаюсь напечатать книгу размером около 400 страниц в Angular 7, для которой мне нужно добавить оглавление. Все работает абсолютно нормально, взяв ссылку на CSS Сгенерированный контент для Paged Media Module , единственное, что в таблице контента мне нужно показать номер справочной страницы. Я сделал это так для отображения контента:

       <table class=" table table-bordered toc">
        <thead class="thead-light">
          <tr>
            <th rowspan="2">Dem.No</th>
            <th rowspan="2" colspan="2">Department to which the Demand/Appropriation Rates</th>
            <th colspan="3">Budget Estimates {{year}}</th>
            <th rowspan="2">Page No.</th>
          </tr>
          <tr>
            <th>Revenue</th>
            <th>Capital</th>
            <th>Total</th>
          </tr>

          <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
          </tr>
        </thead>
        <tbody *ngFor="let demandContents of demandForGrantsContent ">

          <tr *ngIf="demandContents.budgetEstimates[1].total == '0'">
            <td>{{demandContents.demandNumber}}</td>
            <td>{{demandContents.demandName}}</td>
            <td>{{demandContents.budgetEstimates[0].natureOfAccounts}}</td>
            <td class="text-right"><span
                *ngIf="demandContents.budgetEstimates[0].revenueTotal > 0 ; else revenueTotal1">{{demandContents.budgetEstimates[0].revenueTotal}}
              </span>
              <ng-template #revenueTotal1>-
              </ng-template>
            </td>
            <td class="text-right"><span
                *ngIf="demandContents.budgetEstimates[0].capitalTotal > 0 ; else capitalTotal1">{{demandContents.budgetEstimates[0].capitalTotal}}</span>
              <ng-template #capitalTotal1>-</ng-template>
            </td>
            <td class="text-right"><span
                *ngIf="demandContents.budgetEstimates[0].total > 0 ; else total1">{{demandContents.budgetEstimates[0].total}}</span>
              <ng-template #total1>-</ng-template>
            </td>
            <td class="text-right">
              <a href="#departmentId_{{demandContents.departmentId}}" style="content: target-counter(attr(href), page, decimal) !important;">...</a>
            </td>
          </tr>


          <tr *ngIf="demandContents.budgetEstimates[1].total > '0'">
            <td rowspan="2">{{demandContents.demandNumber}}</td>
            <td rowspan="2">{{demandContents.demandName}}</td>

            <td>{{demandContents.budgetEstimates[0].natureOfAccounts}}</td>
            <td class="text-right"><span
                *ngIf="demandContents.budgetEstimates[0].revenueTotal > 0; else revenueTotal2">{{demandContents.budgetEstimates[0].revenueTotal}}</span>
              <ng-template #revenueTotal2>-</ng-template>
            </td>
            <td class="text-right"><span
                *ngIf="demandContents.budgetEstimates[0].capitalTotal >0 ; else capitalTotal2">{{demandContents.budgetEstimates[0].capitalTotal}}</span>
              <ng-template #capitalTotal2>-</ng-template>
            </td>
            <td class="text-right"><span
                *ngIf="demandContents.budgetEstimates[0].total > 0 ;else total2 ">{{demandContents.budgetEstimates[0].total}}</span>
              <ng-template #total2>-</ng-template>
            </td>

            <td rowspan="2" class="text-right"></td>

          </tr>
          <tr *ngIf="demandContents.budgetEstimates[1].total > '0'">
            <td><i>{{demandContents.budgetEstimates[1].natureOfAccounts}}</i></td>
            <td class="text-right"><span
                *ngIf="demandContents.budgetEstimates[1].revenueTotal > 0; else revenueTotal3"><i>{{demandContents.budgetEstimates[1].revenueTotal}}</i></span>
              <ng-template #revenueTotal3>-</ng-template>
            </td>
            <td class="text-right"><span
                *ngIf="demandContents.budgetEstimates[1].capitalTotal > 0; else capitalTotal3"><i>{{demandContents.budgetEstimates[1].capitalTotal}}</i></span>
              <ng-template #capitalTotal3>-</ng-template>
            </td>
            <td class="text-right"><span
                *ngIf="demandContents.budgetEstimates[1].total > 0 ; else total3"><i>{{demandContents.budgetEstimates[1].total}}</i></span>
              <ng-template #total3>-</ng-template>
            </td>

          </tr>
        </tbody>
        <tr>
          <td colspan="3" class="text-right"><b>Gross Total :-</b></td>
          <td class="text-right"><span
              *ngIf="demandForGrantsTotal.revenueGrossTotal > 0 ; else revenueGrossTotal"><b>{{demandForGrantsTotal.revenueGrossTotal}}</b></span>
            <ng-template #revenueGrossTotal>-</ng-template>
          </td>
          <td class="text-right"><span
              *ngIf="demandForGrantsTotal.capitalGrossTotal > 0 ; else capitalGrossTotal"><b>{{demandForGrantsTotal.capitalGrossTotal}}</b></span>
            <ng-template #capitalGrossTotal>-</ng-template>
          </td>
          <td class="text-right"><span
              *ngIf="demandForGrantsTotal.totalGrossTotal > 0 ; else totalGrossTotal"><b>{{demandForGrantsTotal.totalGrossTotal}}</b></span>
            <ng-template #totalGrossTotal>-</ng-template>
          </td>
          <td></td>
        </tr>
        <tr>
          <td colspan="3" class="text-right"><b>Deduct Recoveries(-) :-</b></td>
          <td class="text-right"><span
              *ngIf="demandForGrantsTotal.recoveriesTotalRevenue > 0 ; else recoveriesTotalRevenue">
              <b>{{demandForGrantsTotal.recoveriesTotalRevenue}}</b></span>
            <ng-template #recoveriesTotalRevenue>-</ng-template>
          </td>
          <td class="text-right"><span
              *ngIf="demandForGrantsTotal.recoveriesTotalCapital > 0 ; else recoveriesTotalCapital"><b>{{demandForGrantsTotal.recoveriesTotalCapital}}</b></span>
            <ng-template #recoveriesTotalCapital>-</ng-template>
          </td>
          <td class="text-right"><span
              *ngIf="demandForGrantsTotal.totalRecoveries > 0 ; else totalRecoveries"><b>{{demandForGrantsTotal.totalRecoveries}}</b></span>
            <ng-template #totalRecoveries>-</ng-template>
          </td>
          <td class="text-right"></td>
        </tr>
        <tr>
          <td colspan="3" class="text-right"><b>Total :-</b></td>
          <td class="text-right"><span
              *ngIf="demandForGrantsTotal.totalAfterRevenueRecoveries >0 ; else totalAfterRevenueRecoveries"><b>{{demandForGrantsTotal.totalAfterRevenueRecoveries}}</b></span>
            <ng-template #totalAfterRevenueRecoveries>-</ng-template>
          </td>
          <td class="text-right"><span
              *ngIf="demandForGrantsTotal.totalAfterCapitalRecoveries > 0; else totalAfterCapitalRecoveries"><b>{{demandForGrantsTotal.totalAfterCapitalRecoveries}}</b></span>
            <ng-template #totalAfterCapitalRecoveries>-</ng-template>
          </td>
          <td class="text-right"><span
              *ngIf="demandForGrantsTotal.totalAfterRecoveries > 0 ; else totalAfterRecoveries"><b>{{demandForGrantsTotal.totalAfterRecoveries}}</b></span>
            <ng-template #totalAfterRecoveries>-</ng-template>
          </td>
          <td></td>
        </tr>
      </table>

И в отношении того же, на что я ссылался, вот так:

<div id="demand-for-grants-header" class="shadow p-3 mb-5 bg-white rounded">
  <div *ngFor="let demandReports of demandForGrantsHeader; let i = index" class="pageBreak">
   <div id="departmentId_{{demandReports.demandForGrantsHeaders.departmentId}}" class="row">
     ........DEPARTMENT WISE CHAPTERS--------
   </div>
  </div>
 </div>
     <div class="row">
      <div class="col-md-12 text-right">
        <button type="button" class="btn btn-success hide" type="submit" (click)="PrintDemandForGrants()">
          <i class="cui-print icons font-1xl d-block mt-1 pull-left"></i>print
        </button>
      </div>
    </div>

Все это упаковано в div с идентификатором printDemandForGrants. Теперь я печатаю так:

  PrintDemandForGrants() {
   const htmlToPrint =
   "" +
   '<style type="text/css">' +
   '.pageBreak {page-break-after: always;}' +
   '@page { size: 8in 9.25in;margin: 27mm 16mm 27mm 16mm; }' +
   '@page :right { @bottom-right { content: counter(page); } }' + 
   'table.toc a::after { content: target-counter(attr(href), page, decimal) !important;} '+
   "</style>";
   var printContents = document.getElementById("printDemandForGrants").innerHTML;
   var popupWin = window.open("Salary Bill", "_blank", "width=768,height=auto");

   popupWin.document.write(
   "<html><head>" +
   '<link rel="stylesheet" href="' + this.serverUrl + '/assets/CSS/bootstrap.min.css">' +
    htmlToPrint +      
   '</head><body onload="window.print();window.close()">' +
    printContents +
    "</body></html>"
  );
  popupWin.document.close();
}

target-counter не отображает номер страницы, на которую он нацелен. Когда я пытаюсь отобразить content: "111", который работает абсолютно нормально, вот так:

Я не смог поместить номер страницы в оглавление. Я уверен, что я немного близко к этому, но не могу найти решение. Любые предложения и решения приветствуются.