使用 rotativa PDF 引导最小规模答案

【问题标题】：Boostrap minimum scale with rotativa PDF使用 rotativa PDF 引导最小规模
【发布时间】：2014-12-16 08:40:25
【问题描述】：

我在使用 rotativa 时遇到一个问题，我的引导页面在打印时总是缩放到最小。有什么方法可以为我的视图设置视口大小，因此它不会将引导程序缩放到最小以生成 PDF？

控制器实现

[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">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>

我尝试了一些方法，例如使用 rotativa 的 PageSize、PageHeight、PageWidth 设置。似乎没有什么可以阻止缩放。我也尝试过使用 CustomSwitches，但无法真正找到提供我想要的结果的设置。

我还尝试在 html 元标记中设置静态视口大小，并将我的视图封装在具有静态宽度的 div 中。这些东西似乎都不能阻止我的 PDF 被缩放到最小可能的引导显示。

【问题讨论】：

标签： twitter-bootstrap pdf rotativa

【解决方案1】：

对于仍然在这个问题上遇到的任何其他人：三年多过去了，使用引导程序对此问题没有明确的答案。旧的基于表的实现似乎仍然是最好的解决方法。

即使是底层的Wkhtmltopdf 库的最新版本（0.12.5.0 稳定版）也不能很好地与这些列配合使用，也不能与现在流行的新 Bootstrap 4 配合使用。用户仍在尝试 hack-y Viewport 解决方法，成功率各不相同： https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2301

一些用户表示按照这里的建议切换到col-xs-* 可以解决问题。其他人，包括我自己在内，都没有采用这种方法。即使在列上设置max-width 属性，也可以保持列的大小正确，但它们不会按应有的水平“排列”。

【讨论】：

【解决方案2】：

解决方案最终将我们所有的响应式设计放入表格中，从而破坏了打印部分的响应式设计。我似乎没有其他方法可以找到。只需指定打印的视口大小的功能会很好。

【讨论】：

【解决方案3】：

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

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

【讨论】：

这是迄今为止最好的答案。我试过了，它工作得很好，无需从标准视图修改我的页面。我将我的设置为：1920x1080。

【解决方案4】：

解决办法是将col-md和col-sm全部改成col-xs。这应该可以解决问题。

【讨论】：

【解决方案5】：

你需要把col-sm-*改成col-xs-*

【讨论】：