webgio / Rotativa.AspNetCore

Rotativa for Asp.Net Core
MIT License
269 stars 121 forks source link

Rotativa pdf bottom position is wrong after upgrade visual studio 17.8 #89

Open kleanking opened 11 months ago

kleanking commented 11 months ago

After upgrade to visual studio version 17.8, there is somethings wrong in pdf bottom position as below

I'm currently using Rotativa.AspNetCore 1.3.2 with the below parameters

return new ViewAsPdf(view_name, model, view_data) { PageSize = Rotativa.AspNetCore.Options.Size.A4, PageOrientation = Rotativa.AspNetCore.Options.Orientation.Portrait, PageMargins = new Rotativa.AspNetCore.Options.Margins(2, 0, 5, 0), CustomSwitches = "--disable-smart-shrinking", ContentDisposition = Rotativa.AspNetCore.Options.ContentDisposition.Inline };

  1. Visual studio 17.6

bottom ok

  1. After upgrade to 17.8

pdf bottom up

  1. css for the bottom div element `#invoice_bottom { padding-top: 5px; margin-left: 30px; border-top: 1px solid #ddd; height: 100px; width: 720px; position: fixed; left: 0; bottom: 10px; }

@media print {

@page {
        size: A4 portrait; /* can use also 'landscape' for orientation */
        margin: 0;
}

    html, body {
        width: 210mm;
        height: 297mm;
        display: block;
    }

} `

I have no clue on this problem at all. Could you please check if anything changed with the latest version of Visual studio build environment ?

ArjanKw commented 2 months ago

In case you haven't fixed this: you encase a part of your CSS in @media print. But you haven't provided the --print-media-type custom switch. So this CSS is ignored by wkhtmltopdf. It should have been ignored regardless of the version of the IDE you are running. Wkhtmltopdf shouldn't be affected by the version of Visual Studio.

I recreated this, with no CSS except for the CSS you provided (plus background: yellow). Because the height of the document isn't specified in the CSS, the fixed element is placed on top of the lowest element:

image

Now I add the custom --print-media-type flag:

return new ViewAsPdf("Contact", null, ViewData)
{ 
    PageSize = Rotativa.AspNetCore.Options.Size.A4,
    PageOrientation = Rotativa.AspNetCore.Options.Orientation.Portrait,
    PageMargins = new Rotativa.AspNetCore.Options.Margins(0, 0, 0, 0),
    CustomSwitches = "--disable-smart-shrinking --print-media-type",
    ContentDisposition = Rotativa.AspNetCore.Options.ContentDisposition.Inline
};

And the result is as expected:

image

I set the margins to 0 (new Rotativa.AspNetCore.Options.Margins(0, 0, 0, 0)) as the fixed element otherwise creates another page.

If you don't want to add a custom switch you can also delete the @media print in the CSS.

As it is correct behavior that the print media was ignored (thus not aligning the footer element on the bottom), my guess is that something in your content or CSS changed the height of the document, thus moving the footer.