Rotativa MVC 未在 PDF 上加载 CSS 或图像答案

【问题标题】：Rotativa MVC not loading CSS or Images on PDFRotativa MVC 未在 PDF 上加载 CSS 或图像
【发布时间】：2016-08-29 17:52:42
【问题描述】：

我有一个作为正常操作运行良好的操作（加载所有图像和 CSS），但是当我使用 Rotativa.MVC.ViewAsPdf 生成 PDF 时，它不加载 CSS。并且应用程序没有显示任何错误

public ActionResult DownloadNonProfessionalDeputy(int id) 
  {
      Application_Attorney_NonProfessional oAP = db.Application_Attorney_NonProfessional.Find(id);
      return new Rotativa.MVC.ViewAsPdf(oAP) { FileName = string.Format("DCM_Attorney_Non_Professional_Application.pdf", new { CustomSwitches = "--print-media-type --header-center \"text\"" }) };// {   =  "--header-right \"Page [page] of [toPage]\""};

      //return View(oAP);
  }

帮助表示感谢

PDF 中的图片

HTML 视图中的图像

观点

@model DCM_Intranet.Models.Application_Attorney_NonProfessional
@{
    Layout = null;
    int nPage = 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="~/images/gale_phillipson_corn.ico" type="image/x-icon">
<title>Attorney Non-Professional Application</title>
<link href="~/css/style.default.css" rel="stylesheet">
<link href="~/css/jquery.datatables.css" rel="stylesheet">
<script src="~/Scripts/jquery-2.2.3.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/modernizr.min.js"></script>
<script src="~/js/jquery-migrate-1.2.1.min.js"></script>
<script src="~/js/jquery.sparkline.min.js"></script>
<script src="~/js/toggles.min.js"></script>
<script src="~/js/retina.min.js"></script>
<script src="~/js/jquery.cookies.js"></script>
<script src="~/js/morris.min.js"></script>
<script src="~/js/raphael-2.1.0.min.js"></script>
<script src="~/js/jquery.datatables.min.js"></script>
<script src="~/js/chosen.jquery.min.js"></script>
<script src="~/js/custom.js"></script>
<script src="~/js/jquery.capslockstate.js"></script>
<script src="~/js/jspdf.js"></script>
    </head>
    <body>
      <div class="container-fluid" id="content">
            <!-- Top Header -->
            <div class="row">
                <div class="col-md-12">
                    <table class="table">
                        <tr>
                            <td valign="middle" align="left"><h2>Data Capture</h2></td>
                            <td valign="middle" align="right"><img src="~/Images/dcm.png" width="403" height="100" class="pull-right" />
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    @{nPage++;}
                    <div class="row">
                        <div class="col-sm-6 pull-left"><h2>Court of Protection/Power of Attorney - Non-Professional </h2></div>
                        <div class="col-sm-6 pull-right vcenter"><strong>Page @nPage</strong></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="alert alert-info" role="alert">
                        <strong>Should you require any guidance in completing this form please contact the DCM New Business Team on 01748 825971 or dcm@dcmcash.com</strong>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="well well-sm">
                        <p>This form is for use for Court of Protection/Power of Attorney case where the deputy is Not Acting in a Professional Capacity.</p>
                        <p>
                            This form is intended for professional Introducer/Adviser use only—please do not pass it to your client. The objective of this form is to collect all of the data required to operate Dynamic Cash Management efficiently without any need for your input at a later date.
                        </p>
                        <p>Please ensure that the form is completed in full, as any omissions may lead to a delay in setting up your client’s Dynamic Cash Management account.</p>
                        <p>
                            <b>
                                It is particularly important to ensure that your client is consulted on Sections 8 (ATRI) and 9 (Liquidity) as they are used to determine the types of institutions and accounts that we will deposit your client’s cash with. Proper consultation will ensure that Dynamic Cash Management use only those institutions that your client is comfortable with and that they are able to withdraw funds when they need them.
                            </b>
                        </p>
                    </div>
                </div>
            </div>
</div>
    </body>
    </html>

【问题讨论】：

它确实加载 CSS。很有可能您实际上有一个没有显示很多布局的打印样式表。如果没有实际的 HTML、CSS 和 PDF 输出，我们就无话可说。
添加了图片，它只是引导 CSS 和非常基本的一个
Bootstrap 有 @media print { ...} 样式。
有趣的是甚至图像标签都没有显示
只是debug your print stylesheets。如果您希望打印的页面与屏幕上的页面完全相同，请删除 @media print { ... } 样式。

标签： c# model-view-controller rotativa

【解决方案1】：

css文件和图片都需要使用绝对路径，例如：

<link href="@Server.MapPath(~/css/style.default.css)" rel="stylesheet">

<img src="@Server.MapPath(~/Images/dcm.png)" width="403" height="100" class="pull-right" />

【讨论】：

当 @Styles.Render() 和 BundleConfig 不起作用时，这对我有用。
为我工作。这在 live box 上工作，然后停止工作。在开发机器上正常。手动将样式放入页面并实时工作。然后尝试了这个。 “视图”在 PDF 外部使用时效果很好，但在 PDF 内部使用时效果不佳 - 尽管使用了不同的共享布局（具有相同的捆绑设置）。 PDF 布局视图在分页符周围有一些额外的 CSS

【解决方案2】：

您的代码：

<img src="~/Images/dcm.png" width="403" height="100" class="pull-right" />

更新代码：

<img src="~/Images/dcm.png" style="width:403px; height:100px" class="pull-right" />

在样式属性中保留height 和weight。

【讨论】：

【解决方案3】：

对于 CSS 部分，我做了以下工作：在行动中，

return new PartialViewAsPdf("_PartialViewName", model);

在 _PartialViewName.cshtml 中，

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    @Styles.Render("~/Content/css")
</head>
<body>
    // code here
</body>
</html>

在 BundleConfig.cs 中

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
//other css libraries
));

【讨论】：

【解决方案4】：

优化 Css 和 JavaScript 文件从 CSHTML 页面移除 Loader 并在 javascript URL 中使用异步 <script src="~/Content/Themes/1/js/script.js" async></script> 像这样

【讨论】：

【解决方案5】：

改编 Stephen Zeng 对 asp.net core 的回答。这在 asp.net 核心中对我有用。

@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment _env;
@{
    var cssPath = $"{_env.WebRootPath}\\styles\\booking\\purchase\\receipt.css";
}

@section styles {
    <link href="@cssPath" rel="stylesheet" />
}

我也遇到了一件奇怪的事情，那就是在本地和 Azure 暂存槽中，如果没有这个，它也能正常工作。此更改仅适用于生产槽。

【讨论】：