Rotativa MVC 未在 PDF 上加载 CSS 或图像 [英] Rotativa MVC not loading CSS or Images on PDF

查看：59
本文介绍了Rotativa MVC 未在 PDF 上加载 CSS 或图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个作为正常操作运行良好的操作(加载所有图像和 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]\""};//返回视图(oAP);}

感谢帮助

来自 PDF 的图像

来自 HTML 视图的图像

视图

@model DCM_Intranet.Models.Application_Attorney_NonProfessional@{布局 = 空；int nPage = 0;}<!DOCTYPE html><html lang="zh-cn"><头><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>律师非专业申请</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><身体><div class="container-fluid" id="content"><!-- 顶部标题--><div class="row"><div class="col-md-12"><table class="table"><tr><td valign="middle" align="left"><h2>数据捕获</h2></td><td valign="middle" align="right"><img src="~/Images/dcm.png" width="403" height="100" class="pull-right"/></tr>

<div class="row"><div class="col-md-12">@{nPage++;}<div class="row"><div class="col-sm-6 pull-left"><h2>保护法院/授权书 - 非专业 </h2></div><div class="col-sm-6 pull-right vcenter"><strong>Page @nPage</strong></div>

<div class="row"><div class="col-md-12"><div class="alert alert-info" role="alert"><strong>如果您在填写此表格时需要任何指导，请联系 DCM 新业务团队 01748 825971 或 dcm@dcmcash.com</strong>

<div class="row"><div class="col-md-12"><div class="well well-sm"><p>此表格适用于代理人未以专业身份行事的保护法院/委托书案件.</p><p>此表格仅供专业介绍人/顾问使用 - 请不要将其传递给您的客户.此表格的目的是收集有效运行动态现金管理所需的所有数据，而无需您日后输入.</p><p>请确保完整填写表格，因为任何遗漏都可能导致延迟设置您客户的动态现金管理帐户.</p><p><b>确保就第 8 (ATRI) 节和第 9 节(流动性)咨询您的客户尤为重要，因为它们用于确定我们将向您的客户存入现金的机构和账户的类型.适当的咨询将确保 Dynamic Cash Management 仅使用您的客户感到满意的机构，并且他们能够在需要时提取资金.</b></p>

</html>

解决方案

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

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

I have a action which works well ( loads all images and CSS) as a normal action but when I use Rotativa.MVC.ViewAsPdf to produce a PDF it don't load the CSS. and the application doesn't show any errors 

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);
  }

help appreciated

Image from PDF

Image from HTML View

The View

@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>

解决方案

You need to use absolute path for both css files and images, for example:

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

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

这篇关于Rotativa MVC 未在 PDF 上加载 CSS 或图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆