【问题标题】:Rotativa: bootstrap classes ignoredRotativa:忽略引导类
【发布时间】:2020-03-30 09:48:55
【问题描述】:

使用 rotativa,我成功地使用 ActionAsPdf 从局部视图生成了 pdf。
问题:
生成的 pdf 似乎忽略了引导类。

查看:

@{ 
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@if (Model != null)
{
    <div class="container">
        <div class="flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
                <div>
                    <p class="font-weight-bold">@Model.AssemblyOrderID</p>
                    <span class="font-weight-bold mb-1">@Model.Billing_Unit</span>
                </div>
                <div>
                    <p class="font-weight-bold">@("Materialschein erstellt am " + DateTime.Now.ToShortDateString())</p>
                </div>
            </div>
        </div>
    </div>
    <hr />
    foreach (var article in Model.Articles)
    {
        <div class="container">
            <div class="flex-column align-items-start mb-4">
                <div class="d-flex w-100 justify-content-between">
                    <div>
                        <p class="font-weight-bold">@("Benötigt: " + article.ArticleAmount + "x " + article.ArticleNumber)</p>
                    </div>
                    <div>
                        <p class="font-weight-bold">@("Fehlende Anzahl: " + article.ArticleAmountMissing)</p>
                    </div>
                </div>
            </div>
        </div>
    }
}

pdf 仅列出行,而不是格式化/对齐内容。
内联 css 已被识别,但这不是我想要的。

谷歌帮不了我。有什么建议么?

编辑
Rotativa 似乎无法加载引导 css。我尝试使用 Server.MapPath 和 &lt;link href="~/Content/bootstrap.css"&gt; 加载它,但这并没有帮助。我还在我的默认样式表(Rotativa 正确加载)中导入了 bootstrap.css,但这也无济于事。

编辑 02
这里要求的是生成 pdf 的代码:

public ActionResult PrintPDF(string assemblyOrderID)
{
    return new ActionAsPdf("PrintableView", new { assemblyOrderID = assemblyOrderID });
}

public ActionResult PrintableView(string assemblyOrderID)
{
    var assemblyOrder = dataService.GetAssemblyOrderByNumber(assemblyOrderID);

    if (assemblyOrder != null)
    {
        var viewModel = new StuffNoteViewModel();

        viewModel.AssemblyOrderID = assemblyOrder.AssemblyOrder_PrefixLeft + assemblyOrder.AssemblyOrder_PrefixMiddle + assemblyOrder.AssemblyOrder_Number;
        viewModel.Billing_Unit = assemblyOrder.Work_Address.Billing_Unit;

        var articles = dataService.GetArticlesForAssemblyOrder(assemblyOrderID);

        if (articles.Count > 0)
        {
            foreach (var article in articles)
            {
                viewModel.Articles.Add(new AddArticleItemViewModel()
                {
                    ArticleAmount = article.Quantity,
                    ArticleAmountMissing = article.Quantity - article.OrderQuantity,
                    ArticleNumber = article.Article.Article_Number,
                    Short_Description = article.Article.Short_Description
                });
            }
        }

        return PartialView("~/Areas/AssemblyOrders/Views/Shared/Partials/AssemblyOrderStuffNote.cshtml", viewModel);
    }

    return null;
}

例如,如果我创建一个包含这样一行和列的视图:

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-6" style="background-color: lightcoral;">left</div>
        <div class="col-lg-6 col-md-6 col-6" style="background-color: lightblue;">right</div>
    </div>
</div>

PDF 看起来像这样...:

【问题讨论】:

    标签: asp.net-mvc rotativa


    【解决方案1】:

    尝试将以下内容用作引导 v3.3.7 的 css 链接:

    link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"
    

    使用col-sm 而不是col-lg-6

    【讨论】:

      猜你喜欢
      • 2020-12-26
      • 1970-01-01
      • 1970-01-01
      • 2021-11-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-04-26
      • 2017-07-23
      相关资源
      最近更新 更多