文章/答案/技术大牛

发布

社区首页 >问答首页 >ngx-打印不打印可滚动表(打印媒体解决方案不工作)

问ngx-打印不打印可滚动表(打印媒体解决方案不工作)
EN

Stack Overflow用户

提问于 2022-03-17 01:53:47

回答 1查看 625关注 0票数 0

我在用棱角来工作。我在使用ngxPrint。我尝试打印一个可滚动的表(它有太多的列)。

ngxPrint可以成功地打印很多行，但是它忽略了页面中不适合的列。

我在这里找到了一个解决方案：ngx-print not printing scrollable view。

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

我认为添加这段代码可以解决这个问题，但它没有解决问题。@media工作(我放了一些代码来验证)，但是它忽略了overflow属性。

这是我的密码。有一些西班牙语。我试着把粘乎乎的柱子拆了出来，但都没用。我删除了所有的Css，以防万一，它不起作用。

我做错什么了？

我的代码：

    <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>

printing

angular

回答 1

Stack Overflow用户

发布于 2022-04-12 21:45:44

这个问题没有可行的答案(每个选项都涉及大量困难的代码)。解决方案是选择一个插件，该插件允许生成带有表信息的Excel文件。

编辑:我使用的包是XLSX：https://www.npmjs.com/package/xlsx

您必须在component.ts中使用以下方式导入它：

import * as XLSX from 'xlsx';

然后可以创建一个函数，将表保存为Excel文件，例如：

         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是我为文件创建的一个变量，它具有所需的名称。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71506210

复制

相似问题

问ngx-打印不打印可滚动表(打印媒体解决方案不工作)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ngx-打印不打印可滚动表(打印媒体解决方案不工作)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ngx-打印不打印可滚动表(打印媒体解决方案不工作)
EN