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">test@email.com</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.

score 3 · Answer 1 · answered Aug 19 '15 at 09:48

3

I use "--viewport-size" switch

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

answered Aug 19 '15 at 09:48

Alexandr Sulimov

1,894
2
24
48

This is by far the best answer here. I tried it and it works great without having to modify my page from the standard view. I set mine to: 1920x1080. – Tolga Feb 16 '18 at 05:27

score 2 · Accepted Answer · answered Jan 06 '15 at 13:22

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.

score 2 · Answer 3 · answered Aug 29 '18 at 00:15

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.

score 0 · Answer 4 · edited Jul 12 '15 at 15:30

0

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

edited Jul 12 '15 at 15:30

sjas

18,644
14
87
92

answered Jul 12 '15 at 15:23

anisnet

41
5

score -1 · Answer 5 · edited Mar 27 '15 at 12:35

-1

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

edited Mar 27 '15 at 12:35

MZaragoza

10,108
9
71
116

answered Mar 27 '15 at 08:25

elson

1

Boostrap minimum scale with rotativa PDF

5 Answers5