Webgrid exportiert in PDF mit Rotativa in einer MVC-Anwendung

Question

Ich exportiere ein Webgrid mit 100 von Datensätzen in ein PDF mit Rotativa-Bibliothek. Ich bin in der Lage, Daten erfolgreich in das PDF zu exportieren, aber das Problem ist, dass, da er so viele Datensätze enthält, die PDF Spaltenüberschriften auf jeder Seite hat. Aus diesem Grund überlappt der Spaltenkopf den Spalteninhalt auf jeder Seite der PDF. Ich möchte die Spaltenüberschriften nur auf der ersten Seite der PDF, nicht auf jeder Seite haben.

Die partialview (_Report.cshtml) ist wie folgt:

<div id="reportDetailGrid"> 
     @grid2.GetHtml(
        tableStyle: "webgrid-table", 
      headerStyle: "webgrid-header", 
      footerStyle: "webgrid-footer", 
      alternatingRowStyle: "webgrid-alternating-row", 
      selectedRowStyle: "webgrid-selected-row", 
      rowStyle: "webgrid-row-style", 
      mode: WebGridPagerModes.All, 
      columns: grid2.Columns(
         grid2.Column("PropertyCode", "PropertyCode", format: @<text>@item.PropertyCode</text>), 
         grid2.Column("TransactionTime", "TransactionTime", format: @<text>@item.TransactionTime</text>), 
         grid2.Column("ConfirmationNo", "ConfirmationNo",format: @<text>@item.ConfirmationNo</text>), 
        grid2.Column("AlertCode", "AlertCode",format: @<text>@item.AlertCode</text>), 
        grid2.Column("ErrorMessage", "ErrorMessage",format: @<text>@item.ErrorMessage</text>) 
) 
) 

    </div> 

Und der Controller-Code ist:

public ActionResult DownloadReportPDF() 
    { 
     var model = GetReportsViewModelData(); 
     //Code to get content 
     return new Rotativa.PartialViewAsPdf("_Report", model) { FileName = "DigitalDashboardReport.pdf" }; 
    } 

Unterhalb der Screenshot der Seite des zweiten PDF ist:

Und es passiert auf jeder Seite von PDF.

Kann mir bitte jemand helfen, die Spaltenüberschriften nur auf der ersten Seite und nicht auf jeder Seite von PDF oder wenn sie eine andere Möglichkeit, den Inhalt in PDF zu exportieren. Vielen Dank im Voraus.

Answer 1

Ich habe es geschafft durch Zugabe von unten Styling Code in Teilansicht das Problem zu beheben:

thead { display: table-header-group; } 
tfoot { display: table-row-group; } 
tr { page-break-inside: avoid; }