How to display page breaks in PDF generated by Rotativa

Question

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

Branca

Answer 1

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

Crease

I used the following <div id="A" style="page-break-after:always;">@{Html.RenderPartial("View1");}</div> 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. – Branca

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. – Crease

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 ... – Hone

Answer 2

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!

Hypophysis

Answer 3

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.

Vetiver

Answer 4

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

Stricklin

Answer 5

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.

Fingerbreadth