“如何正确显示带有”@media print 的表格？

Question

我正在努力从 html 正确打印表格。当我触发打印按钮时，预览不尊重网络浏览器中的实际显示，它只是一堆文本，一个独特的段落。我进行了一些研究并发现了@media print，但我无法处理。

这是我的表格 html 代码

<a id="top"></a>
<div class="row ">

    <div class="col l12">

        <!--<h4><b>Listes des participants aux séances d'orientation</b></h4>-->

    <form materialize>
         <div class="input-field col l3">
            <i class="material-icons prefix">account_circle</i>
            <input id="icon_prefix" type="text" class="validate" name="something" [(ngModel)]='nomSearch'>
            <label for="icon_prefix">Nom</label>
         </div>
    </form>

    <form materialize>
         <div class="input-field col l3">
            <i class="material-icons prefix">domain</i>
            <input id="icon_prefix" type="text" class="validate" name="something" [(ngModel)]='partiSearch'>
            <label for="icon_prefix">Parti Politique</label>
         </div>
    </form>

    <form materialize>
         <div class="input-field col l3">
            <i class="material-icons prefix">room</i>
            <input id="icon_prefix" type="text" class="validate" name="something" [(ngModel)]='depSearch'>
            <label for="icon_prefix">Departement</label>
         </div>
    </form>
    <form materialize>
         <div class="input-field col l3">
            <i class="material-icons prefix">room</i>
            <input id="icon_prefix" type="text" class="validate" name="something" [(ngModel)]='comSearch'>
            <label for="icon_prefix">Commune</label>
         </div>
    </form>




        <table id="print" class="bordered highlight" *ngIf='candInfo && candInfo.length'>
            <thead>
              <tr >
                  <th>Nom</th>
                  <th>Prénom</th>
                  <th>Parti Politique</th>
                  <th>Département</th>
                  <th>Commune<br></th>
              </tr>
            </thead>

            <tbody>
              <tr *ngFor = 'let candidats of candInfo | personSearch: nomSearch:partiSearch:depSearch:comSearch'>
                <td>{{candidats.nom}}</td>
                <td>{{candidats.prenom}}</td>
                <td>{{candidats.parti}}</td>
                <td>{{candidats.departement}}</td>
                <td>{{candidats.commune}}<br></td>
              </tr>
            </tbody>
      </table>
      <a id="bottom"></a>

    </div>
    <div class="col l1"></div>
     <div class="fixed-action-btn vertical click-to-toggle">
        <a class="btn-floating btn-large red">
            <i class="material-icons">menu</i>
        </a>
        <ul>

            <li><a scrollTo href="#top" class="btn-floating green"><i class="material-icons">arrow_upward</i></a></li>
            <li><a  class="btn-floating green" (click)="print()"><i class="material-icons">print</i></a></li>
            <li><a  routerLink="#bottom"class="btn-floating green"><i class="material-icons">insert_chart</i></a></li>
            <li><a scrollTo href="#bottom" class="btn-floating green"><i class="material-icons">arrow_downward</i></a></li>
        </ul>
    </div>

</div>

关联的组件

import { Component, OnInit } from '@angular/core';
import { PaeServiceService } from '../pae-service.service';
import { Icandidat } from '../candidat/icandidat';
import {MaterializeAction} from 'angular2-materialize';

@Component({
  selector: 'app-or-ouest',
  templateUrl: './or-ouest.component.html',
  styleUrls: ['./or-ouest.component.css'],
  providers : [PaeServiceService]
})
export class OrOuestComponent implements OnInit {
    candInfo : any [];
    nomSearch : string ;
    depSearch : string ;
    comSearch : string ;
    partiSearch : string ;





    candidatID : number;
    candidatNom : string;
    canditatPrenom : string ;
    candidatParti : string;
    candidatDepartement : string;
    candidatCommune : string ;

    candidats : Icandidat;
    errorMessage : string;


  constructor(private _candidatService : PaeServiceService) {

   }

  ngOnInit() {

     this._candidatService.getCandidatInfo()
            .subscribe(candidats => this.candInfo = candidats,
            error => this.errorMessage = <any>error);
  }

  print(): void {
    let printContents, popupWin;
    printContents = document.getElementById('print').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <title></title>
          <style>
          //........Customized style.......

          </style>
        </head>
        <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}

}

到目前为止我的 CSS

@media print{
 table {
    display: table;
    border-spacing: 2px;
     display: table-cell;
    border: solid 1px #ccc;
    padding: 2px;
    display: table-row;
    }
}

感谢您的帮助

Answer 1

我重写了打印方法

print(): void {
    var toBePrinted = document.getElementById("print");
    var newWind =window.open("");
    newWind.document.write(toBePrinted.outerHTML);
    newWind.print();
    newWind.close();
}