Rendered Size of Printed Page using CSS @Page

Question

Hi and thanks for looking!

Background

I am printing a multi-page report using Rotativa PDF which prints pages of HTML to a PDF. In doing this, I need to follow @page conventions of CSS 2.1 and higher.

My application is in C#, MVC 3.

Problem/Question:

Even if I specify 8.5in by 11in in the @page declaration, the page within the printed PDF is only scaled to about 75% of the 8.5X11 sheet. I know this because I have a background image that should cover the entire page, but it prints to the PDF at only about 75% of the whole page. The content is scaled down too so everything is proportionally correct, just not canvasing the whole 8.5X11 frame as it should.

I am setting up the cover page of the report like this in CSS:

@page defaultPage{size:8.5in 11in;margin: 2cm;}    
#CoverPage {
        page: defaultPage;
        background-image: url(/Resources/rendered_assets/img/cover_bg.jpg); 
        background-repeat:no-repeat;
        width:8.5in;
        height: 11in;           
    }

And the HTML:

 <div id="CoverPage">
        <p>foo</p>
        <p>bar</p>
 </div>

Any idea what I might be doing wrong? Thanks in advance.

Answer 1

Don't know if it would solve your problem.. but with the latest Rotativa release you get the possibility to pass some options to the rendering engine. You can set PageWidth and PageHeight and Margins like this:

    return new ViewAsPdf()
    {
        FileName = "TestView.pdf",
        PageSize = Size.A3,
        PageOrientation = Orientation.Landscape,
        PageMargins = { Left = 0, Right = 0 }, // it's in millimeters
        PageWidth = 122, // it's in millimeters
        PageHeight = 44
    };

Answer 2

var urlHelper = new UrlHelper(Request.RequestContext);

string url = urlHelper.Action("Index", new { name = "value" });

return new UrlAsPdf("http://www.github.com")
{
    FileName = "TestExternalUrl.pdf",
    PageMargins = new Margins(3, 3, 3, 3)
};