2

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

enter image description here

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:

enter image description here

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!

Slinky
  • 5,662
  • 14
  • 76
  • 130

3 Answers3

1

Try this css:

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

ref

Community
  • 1
  • 1
karaxuna
  • 26,752
  • 13
  • 82
  • 117
  • 1
    In this case your answer don't work because Rotativa don't convert the current view in your browser, when the user send to print, it's another request to the server, render the view and convert to pdf – Zach dev Aug 29 '13 at 14:31
1

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>
}
Zach dev
  • 1,610
  • 8
  • 15
  • Yes, this solution was really good. I just created a new view model member and used it like you suggested. Thanks – Slinky Aug 29 '13 at 16:23
0

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
                };
Dorathoto
  • 201
  • 7
  • 17