17

In my ASP.NET MVC 4 app, I have an index view that has several partial views embedded in it. I installed latest version 1.6.1 of Rotativa via NuGet. Now I can print the index page to a PDF using Rotativa. I would like to have a page break in the PDF after every partial view. How can this be achieved using Rotativa?

I tried to follow this example to use CustomSwitches but there does not seem to be one for page break. I used this article to generate the PDF

Community
  • 1
  • 1
nam
  • 21,967
  • 37
  • 158
  • 332

5 Answers5

30

If you are using 1.6.1 you can just add the page breaks in the CSS (this does not work consistently in 1.5.0, I have not tested 1.6.0)

So add this style, not to a specific element like p.breakhere{...} but as shown below (some folks had issues on a specific element)

<STYLE TYPE="text/css">
 .breakhere { page-break-after: always }
</STYLE>

Then in your html just do this

<P CLASS="breakhere">

And it should break nicely. Do be aware that 1.6.1 has a bug with Ghosted images, intermittently... See this SO entry Link

Community
  • 1
  • 1
Eric Brown - Cal
  • 14,135
  • 12
  • 58
  • 97
  • 1
    I used the following `
    @{Html.RenderPartial("View1");}
    ` for each view on the index.cshtml page. You are right that adding p.breakhere(...) would cause the issues as it would probably apply this style to all the paragraphs.     – nam Apr 16 '14 at 16:48
  • 1
    I could kiss you kind sir. Thank you. – Joe May 29 '14 at 18:18
  • Nam, only if you apply the breakhere class...my point was that Rotativa (wkhtmltopdf) doesn't handle them correctly unless they are a root style. – Eric Brown - Cal Jun 02 '14 at 01:53
  • 1
    Works for me also inside another css file (so no root style, in case I understand you correctly), but I had to remove the `overflow: auto` from the MVC4 generated CSS section `#main` - no idea what problems an overflow: auto could cause ... – outofmind Nov 30 '15 at 15:49
9

The answer is correct but you have to do it in a different manner like:

<div style="page-break-after: always;">Content before page breaks</div>
<div>Content after page breaks<div>

This does the trick!

Hope that helps!

Byron Lopez
  • 193
  • 2
  • 8
4

You can use any of this three CSS code to set the page break for an element,

page-break-after
page-break-before
page-break-inside

According to your situation.

Lamb Chop
  • 225
  • 2
  • 12
Sobin Sunny
  • 1,121
  • 10
  • 14
2

This works every time for me and in all browsers. My application is ASP.NET MVC3 Razor.

In your style sheet (.css) or in a style tag put this:

@media all {    .page-break { display: none; } }

@media print {  .page-break { display: block; page-break-before: always; } }

Where you want your page to break put this:

<div class="page-break"></div>

Works perfect in all browsers

Tim
  • 77
  • 5
0

I found 1.6.1 works locally, but hosted on 2012 R2 windows, a QT 6.2 incompatible version breaks the generation of the application so this was not the solution for me. Instead, i ended up forcing a large margin-top in my css and then that actually forced my content to the top of the next generated page consistently, and therefore achieved my requirement. Strange, but it worked.

Qt: Untested Windows version 6.2 detected!
Error: Failed loading page https://a.b.co.uk/c/d/1(sometimes it will work just to ignore this error with --load-error-handling ignore)

Added this and it force made my new page for the content i needed it to...

<div class="row-fluid page-break" style="margin-top: 800px;">

I think a page height in pixels is 824px, so this pushes it over. It's a workaround, but i've just spent a few hours trying to get this to work, and was about to change Rotativa for another solution, but this was a easier option.

Jeffrey Holmes
  • 337
  • 3
  • 11