Boostrap minimum scale with rotativa PDF

Question

I have a problem when using rotativa, that my bootstrap page always scales to minimum when printed. Is there any way I can set viewport size for my view, so it wont scale bootstrap to minimum for PDF generation?

Controller implementation

[HttpGet]
public ActionResult DownloadViewPDF()
{
    var vm = new Viewmodel();
    return new Rotativa.ViewAsPdf("SummaryPDF", vm) { FileName = "TestViewAsPdf.pdf", PageSize = Size.A4 };
}

And this is my general view implementation

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <span class="label">Email</span>
            <span class="form-control-static">[email protected]</span>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <div class="required-enabled">
                <span class="label">Phone</span>
                <span class="form-control-static">(804) 222-1111</span>
            </div>
        </div>
    </div>
</div>

I've tried a few things, for an example using the PageSize, PageHeight, PageWidth settings of rotativa. Nothings seems to prevent the scaling. I've also tried using CustomSwitches, but couldnt really find a setting that provided the result I wanted.

I've also tried setting a static viewport size in the html meta tag, and encapsulating my view in a div with static width. None of these things seem to prevent my PDF from being scaled to minimum possible bootstrap display.

Answer 1

The solution ended up being putting all our responsive design into tables, thus trashing the responsive design for the print part. There seemed to be no other way that I could find. It would be nice with a feature to just specify viewport size for the print.

Answer 2

I use "--viewport-size" switch

new ViewAsPdf("Edit", model) { PageOrientation = Orientation.Landscape, CustomSwitches = "--viewport-size 1000x1000" };

Answer 3

you need to change col-sm-* to col-xs-*

Answer 4

For anyone else still stumbling across this: More than three years later, there is no definitive answer for this issue using bootstrap. A legacy table-based implementation still seems to be the best workaround.

Even the underlying Wkhtmltopdf library's latest version (0.12.5.0 stable) does not play well with the columns, nor with the new Bootstrap 4 that's now out in the wild. Users are still trying the hack-y Viewport workaround, with varying rates of success: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2301

Some users indicate that switching to col-xs-* as suggested here does the trick. Others, myself included, have no luck with that approach. Even setting a max-width attribute on the column keeps the columns sized properly, but they don't "line up" horizontally as they should.

Answer 5

The solution is to change all col-md and col-sm into col-xs. That should do the trick.