在从视图渲染 PDF 之前删除“打印”按钮 - MVC3

Question

I have a view that I pass to Rotativa (wkhtmltopdf) to get a PDF version of the view for users to print, once they click the "print button":

Here is the rendered view that will be converted to PDF if the user clicks the "print" button

Here is the button code from the view

<div id="print-pdf" align="center">
    <a id="print-me"  class = "print-btn"
   href='@Url.Action("PrintMyView", "Report", 
             new { id = Model.MonthlyReportID, 
                   clubKeyNo = Model.ClubKeyNumber, 
                   month = Model.ReportMonth, 
                   year = Model.ReportYear }, null)'>Print Report</a>
</div>

Common sense tells me that I need to remove the button before the PDF is generated from the view, so users don't get a PDF with a button on it:

I tried hiding the button (.hide()) and also removing it (.remove()) but the PDF is still rendering with the button:

<script type="text/javascript">

    $(document).ready(function () {

        $('#print-me').show(); 

        $('#print-pdf').click(function () {
            $('#print-me').hide();
        });
    });


</script>

Anything else that I could try here?

Thanks!

Answer 1

Try this css:

@media print 
{
    #print-me
    {
        display:none;
    }
}

ref

Answer 2

You can do a version for PDF so you can handled what and what no should be printed

what are running in javascript does not work because then executed when the doom is ready, but the Rotativa will not execute any javascript

so, you render just what you need

@if (Model.mustPrint){ 
    <div id="print-pdf" align="center">
        <a id="print-me"  class = "print-btn"    href='@Url.Action("PrintMyView", "Report",
                     new
                     {
                         id = Model.MonthlyReportID,
                         clubKeyNo = Model.ClubKeyNumber,
                         month = Model.ReportMonth,
                         year = Model.ReportYear
                     }, null)'>Print Report</a> 
    </div>
}

Answer 3

Rotativa does not render as print media, but as a browser, you must force rendering as print. Send the " --print-media-type " argument

Doing this you can use css to hide if the media for print

@media print {
.noprint {
display: none! important
}}

Ex:

    return new ViewAsPdf("Details", obj)
                    {
                        CustomSwitches = "--print-media-type"
}

Complete example:

return new ViewAsPdf("Details", obj)
                {
                    CustomSwitches = "--print-media-type",
                    FileName = your_name_report.pdf",
                    PageOrientation = Orientation.Portrait,
                    PageSize = Size.A4,
                    PageMargins = new Margins(0, 0, 0, 0),
                    PageWidth = 210,
                    PageHeight = 297
                };