「如何使用」@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(); 
}