ngx-print not printing scrollable table (print media solution doesnt work)

Question

Im working with Angular. Im using ngxPrint. I try to print a scrollable table (it has too many columns).

ngxPrint can print successfully a lot of rows, but it ignores the columns that doesnt fit in the page.

I found a solution here: ngx-print not printing scrollable view.

@media print {
  #print-section {
    overflow-y: visible !important;
    position: relative;
  }
}

I though adding that piece of code would solve the problem, but it didn't. @media works (I put some code to verify), but it simply ignores the overflow-y property.

This is my code. It has some spanish. I tried taking out the Sticky columns, it didnt work. I erased all Css just in case, it didnt work.

What I am doing wrong?

My code:

    <button mat-raised-button color="primary" #print printTitle="" printSectionId="print-section" [useExistingCss]="true" ngxPrint>Imprimir</button>
<div id="print-section">
  <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container matColumnDef="select" sticky>
      <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox
          (change)="$event ? masterToggle() : null"
          [checked]="selection.hasValue() && isAllSelected()"
          [indeterminate]="selection.hasValue() && !isAllSelected()"
          [aria-label]="checkboxLabel()"
        >
        </mat-checkbox>
      </th>
      <td mat-cell *matCellDef="let row">
        <mat-checkbox
          (click)="$event.stopPropagation()"
          (change)="$event ? selection.toggle(row) : null"
          [checked]="selection.isSelected(row)"
          [aria-label]="checkboxLabel(row)"
        >
        </mat-checkbox>
      </td>
    </ng-container>

    <ng-container matColumnDef="DEUDA_TOTAL" sticky>
      <th mat-header-cell *matHeaderCellDef mat-sort-header="DEUDA_TOTAL">
        Deuda
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.DEUDA_TOTAL | currency }}
      </td>
    </ng-container>

    <ng-container matColumnDef="GRADO_ALUMNO" sticky>
      <th mat-header-cell *matHeaderCellDef mat-sort-header="GRADO_ALUMNO">
        Grado
      </th>
      <td mat-cell *matCellDef="let element">{{ element.GRADO_ALUMNO }}</td>
    </ng-container>

    <ng-container matColumnDef="NOMBRES_ALUMNO" sticky>
      <th mat-header-cell *matHeaderCellDef mat-sort-header="NOMBRES_ALUMNO">
        Alumno
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.NOMBRES_ALUMNO + " " + element.APELLIDOS_ALUMNO }}
      </td>
    </ng-container>

    <ng-container matColumnDef="NOMBRES_REPRESENTANTE">
      <th
        mat-header-cell
        *matHeaderCellDef
        mat-sort-header="NOMBRES_REPRESENTANTE"
      >
        Representante
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.NOMBRES_REPRESENTANTE }}
      </td>
    </ng-container>

    <ng-container matColumnDef="CEDULA_REPRESENTANTE">
      <th
        mat-header-cell
        *matHeaderCellDef
        mat-sort-header="CEDULA_REPRESENTANTE"
      >
        Cédula
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.TIPO_REPRESENTANTE + "-" + element.CEDULA_REPRESENTANTE }}
      </td>
    </ng-container>

    <ng-container matColumnDef="CORREO_REPRESENTANTE">
      <th
        mat-header-cell
        *matHeaderCellDef
        mat-sort-header="CORREO_REPRESENTANTE"
      >
        Correo
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.CORREO_REPRESENTANTE }}
      </td>
    </ng-container>

    <ng-container matColumnDef="TELEFONO_REPRESENTANTE">
      <th
        mat-header-cell
        *matHeaderCellDef
        mat-sort-header="TELEFONO_REPRESENTANTE"
      >
        Teléfono
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.TELEFONO_REPRESENTANTE }}
      </td>
    </ng-container>

    <ng-container matColumnDef="DIRECCION_REPRESENTANTE">
      <th
        mat-header-cell
        *matHeaderCellDef
        mat-sort-header="DIRECCION_REPRESENTANTE"
      >
        Dirección
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.DIRECCION_REPRESENTANTE }}
      </td>
    </ng-container>

    <ng-container matColumnDef="PAGO_SEPTIEMBRE">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="PAGO_SEPTIEMBRE">
        Septiembre
      </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.PAGO_SEPTIEMBRE !== 0"
          >{{ element.PAGO_SEPTIEMBRE | currency }}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="FECHA_SEPTIEMBRE">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="FECHA_SEPTIEMBRE">
        Fecha
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHA_SEPTIEMBRE | date: "dd-MM-yy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="PAGO_OCTUBRE">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="PAGO_OCTUBRE">
        Octubre
      </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.PAGO_OCTUBRE !== 0"
          >{{ element.PAGO_OCTUBRE | currency }}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="FECHA_OCTUBRE">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="FECHA_OCTUBRE">
        Fecha
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHA_OCTUBRE | date: "dd-MM-yy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="PAGO_NOVIEMBRE">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="PAGO_NOVIEMBRE">
        Noviembre
      </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.PAGO_NOVIEMBRE !== 0"
          >{{ element.PAGO_NOVIEMBRE | currency }}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="FECHA_NOVIEMBRE">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="FECHA_NOVIEMBRE">
        Fecha
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHA_NOVIEMBRE | date: "dd-MM-yy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="PAGO_DICIEMBRE">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="PAGO_DICIEMBRE">
        Diciembre
      </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.PAGO_DICIEMBRE !== 0"
          >{{ element.PAGO_DICIEMBRE | currency }}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="FECHA_DICIEMBRE">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="FECHA_DICIEMBRE">
        Fecha
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHA_DICIEMBRE | date: "dd-MM-yy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="PAGO_ENERO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="PAGO_ENERO">
        Enero
      </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.PAGO_ENERO !== 0"
          >{{ element.PAGO_ENERO | currency }}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="FECHA_ENERO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="FECHA_ENERO">
        Fecha
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHA_ENERO | date: "dd-MM-yy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="PAGO_FEBRERO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="PAGO_FEBRERO">
        Febrero
      </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.PAGO_FEBRERO !== 0"
          >{{ element.PAGO_FEBRERO | currency }}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="FECHA_FEBRERO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="FECHA_FEBRERO">
        Fecha
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHA_FEBRERO | date: "dd-MM-yy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="PAGO_MARZO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="PAGO_MARZO">
        Marzo
      </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.PAGO_MARZO !== 0"
          >{{ element.PAGO_MARZO | currency }}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="FECHA_MARZO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="FECHA_MARZO">
        Fecha
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHA_MARZO | date: "dd-MM-yy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="PAGO_ABRIL">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="PAGO_ABRIL">
        Abril
      </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.PAGO_ABRIL !== 0"
          >{{ element.PAGO_ABRIL | currency }}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="FECHA_ABRIL">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="FECHA_ABRIL">
        Fecha
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHA_ABRIL | date: "dd-MM-yy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="PAGO_MAYO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="PAGO_MAYO">
        Mayo
      </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.PAGO_MAYO !== 0"
          >{{ element.PAGO_MAYO | currency }}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="FECHA_MAYO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="FECHA_MAYO">
        Fecha
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHA_MAYO | date: "dd-MM-yy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="PAGO_JUNIO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="PAGO_JUNIO">
        Junio
      </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.PAGO_JUNIO !== 0"
          >{{ element.PAGO_JUNIO | currency }}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="FECHA_JUNIO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="FECHA_JUNIO">
        Fecha
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHA_JUNIO | date: "dd-MM-yy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="PAGO_JULIO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="PAGO_JULIO">
        Julio
      </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.PAGO_JULIO !== 0"
          >{{ element.PAGO_JULIO | currency }}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="FECHA_JULIO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="FECHA_JULIO">
        Fecha
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHA_JULIO | date: "dd-MM-yy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="PAGO_AGOSTO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="PAGO_AGOSTO">
        Agosto
      </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.PAGO_AGOSTO !== 0"
          >{{ element.PAGO_AGOSTO | currency }}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="FECHA_AGOSTO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="FECHA_AGOSTO">
        Fecha
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHA_AGOSTO | date: "dd-MM-yy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="ESTATUS">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="ESTATUS">
        Estatus
      </th>
      <td mat-cell *matCellDef="let element">
        {{ element.ESTATUS | estatusPipe }}
      </td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Acciones</th>
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <td mat-cell *matCellDef="let row">
        <button mat-icon-button><mat-icon>launch</mat-icon></button>
        <button mat-icon-button color="warn">
          <mat-icon>delete_outline</mat-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>

  <mat-paginator
    [pageSizeOptions]="[8, 20, 30, 40]"
    [pageSize]="8"
    showFirstLastButtons=""
  ></mat-paginator>
</div>

Answer 1

There was no viable answer for this problem (every option involved a lot of difficult code). The solution was to pick a plugin that allowed to generate an Excel file with the table info.

Edit: The package I used was XLSX : https://www.npmjs.com/package/xlsx

You have to import it in the component.ts with:

import * as XLSX from 'xlsx';

Then you can create a function to save table as Excel file, for example:

         exportExcel(): void
  {
    /* pass here the table id */
    let element = document.getElementById('table-section');
    const ws: XLSX.WorkSheet =XLSX.utils.table_to_sheet(element);
 
    /* generate workbook and add the worksheet */
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
 
    /* save to file */  
    XLSX.writeFile(wb, this.fileName);
  }

this.fileName is a variable I created with the desired name for the file.