Angular6-在单行中打印多于50列的表

Question

我正在尝试打印具有50列以上的表格，并按行显示这些列。

在Angular6程序中，我使用Javascript的window.print（）生成打印的iframe，以在该iframe上打印所需的模板。 但是，在打印包含50列的表格时，在一行中仅显示18列，其余的列被隐藏。

@Injectable()
export class PrintDocumentService {
  isPrinting = false;

  constructor(private router: Router) {}

  printDocument(documentName: string) {
    this.isPrinting = true;
    this.router.navigate([
      "/",
      {
        outlets: {
          print: ["print", documentName]
        }
      }
    ]);
  }

  onDataReady() {
    setTimeout(() => {
      window.print();
      this.isPrinting = false;
      this.router.navigate([{ outlets: { print: null } }]);
    }, 1000);
  }
}

样式如下。而且是全球性的。

@media print {
  .isPrinting > * {
    display: none;
  }
  .isPrinting staples-print-layout {
    display: block;
  }
  .cdk-overlay-container {
    display: none;
  }
}

打印的组件如下。

export class PrintDocumentComponent implements OnInit, OnDestroy {
  private _onDestroy = new Subject<void>();

  dataForPrint: {};
  keysForPrintedTable = [];]

  rowTableData = [];

  constructor(
    private _printService: PrintDocumentService,
    private _loglistingService: LoglistingService
  ) {}

  ngOnInit() {
    this._printService.onDataReady();
    this._loglistingService
      .setTestDataToPrint()
      .pipe(takeUntil(this._onDestroy))
      .subscribe(printedData => {
        try {
          if (printedData.length > 0) {
            this.dataForPrint = printedData;
            this.keysForPrintedTable = Object.keys(this.dataForPrint[0]);
          }
        } catch (e) {}
      });
  }

打印的模板如下。

<div class="printed-document">
  <table class="table">
    <thead>
      <tr>
        <th scope="col" *ngFor="let headerRow of keysForPrintedTable">
          <span>{{
            headerRow
          }}</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let printedData of dataForPrint">
        <td *ngFor="let key of rowTableData">
          <div
          >
            {{ printedData[key] }}
          </div>

        </td>
      </tr>
    </tbody>
  </table>
</div>

谢谢。