Boostrap最小规模与Rotativa PDF

Question

使用rotativa时，我的bootstrap页面在打印时总是缩小到最小。有没有办法为我的视图设置视口大小，以便在生成PDF时不会将bootstrap缩小到最小？

控制器实现

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

这是我的通用视图实现

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <span class="label">Email</span>
            <span class="form-control-static">[e-mail]</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">[phone]</span>
            </div>
        </div>
    </div>
</div>

我尝试过几种方法，例如使用Rotativa的PageSize、PageHeight、PageWidth设置。但似乎没有任何一种方法能够防止缩放。我还尝试使用CustomSwitches，但无法找到所需的设置。

我还尝试在html meta标签中设置静态视口大小，并将我的视图封装在具有静态宽度的div中。但这些方式都不能防止我的PDF被缩放为最小可能的Bootstrap显示。

- oakjim

Answer 1

我使用“--viewport-size”开关

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

- Alexandr Sulimov

---

这绝对是这里最好的答案。我尝试了一下，它非常有效，而且不需要修改我的页面标准视图。我将我的设置为：1920x1080。 - Tolga

Answer 2

对于仍在苦苦挣扎的其他人：三年多过去了，使用Bootstrap，这个问题仍然没有明确的答案。传统的基于表格的实现似乎仍然是最好的解决方法。

即使是底层的Wkhtmltopdf库的最新版本（0.12.5.0稳定版）也无法很好地处理列，也无法与现在已经推出的Bootstrap 4很好地协作。用户仍在尝试hack-y Viewport解决方案，成功率不一： https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2301 一些用户表示，切换到建议中的col-xs-*可以解决问题。但是其他人（包括我自己）使用这种方法没有成功。即使在列上设置max-width属性也可以使列保持正确的大小，但它们不能像应该那样水平排列。

- Synctrex

Answer 3

解决方案最终是将所有响应式设计放入表格中，因此破坏了打印部分的响应式设计。我没有找到其他方法。如果有一种功能可以仅为打印指定视口大小就好了。

- oakjim

Answer 4

解决方案是将所有的 col-md 和 col-sm 更改为 col-xs。那就行了。

- anisnet

Answer 5

你需要将 col-sm-* 改为 col-xs-*

- elson