Rotativa MVC not loading CSS or Images on PDF

Question

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>

It _does_ load CSS. Chances are you actually have a print stylesheet that doesn't show a lot of layout. We can't say anything about this without the actual HTML and CSS and PDF output. — CodeCaster, May 04 '16 at 10:35
Just [debug your print stylesheets](http://stackoverflow.com/questions/2452713/suggestions-for-debugging-print-stylesheets). If you want your printed page to look exactly as the on-screen page, then remove the `@media print { ... }` styles. — CodeCaster, May 04 '16 at 11:17
removed all CSS and HTML just put an image tag, and it doesn't show the image on PDF , but it dose on the view — LeBlues, May 04 '16 at 11:20
I've used Rotativa with images just fine. Perhaps you have multiple questions in one. The behavior you describe is caused by print styles, the images not appearing can have other causes. — CodeCaster, May 04 '16 at 11:21
I think this has something to do with Rotativa configuration rather than CSS, :-( — LeBlues, May 04 '16 at 11:25
No, Rotativa hardly has any configuration and will render most images just fine. Please update your question with an [mcve] about either of the problems (print media CSS _or_ images). — CodeCaster, May 04 '16 at 11:52

score 23 · Answer 1 · answered Jul 21 '16 at 15:13

23

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

answered Jul 21 '16 at 15:13

Stephen Zeng

2,748
21
18

4

This worked for me when a @Styles.Render() & BundleConfig did not. – bkbarton Apr 05 '17 at 17:25
Worked for me. This was working on the live box then stopped working. OK on dev machine. Put the styles into the page manually and worked live. Then tried this. The "View" works fine when used outside of a PDF but not when used inside the PDF - although a different shared-layout is used (with the same bundle settings). The PDF layout view has some extra CSS around page breaks – Sep 20 '18 at 16:35

score 0 · Answer 2 · edited Aug 05 '17 at 10:06

0

Your Code:

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

Updated Code:

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

Keep height and weight in the style attribute.

edited Aug 05 '17 at 10:06

Kirk Beard

9,569
12
43
47

answered Aug 05 '17 at 10:03

raeen rizwana

1

score 0 · Answer 3 · answered Dec 07 '17 at 09:44

For the CSS Part, I did the following: In Action,

return new PartialViewAsPdf("_PartialViewName", model);

In _PartialViewName.cshtml,

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

In BundleConfig.cs

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

score 0 · Answer 4 · answered Jul 15 '20 at 20:24

0

Optimize Css and JavaScript File Remove Loader from CSHTML page and Use async in javascript URL' <script src="~/Content/Themes/1/js/script.js" async></script> Like this

answered Jul 15 '20 at 20:24

Abhendra Tiwari

23
1
11

score 0 · Answer 5 · answered Oct 06 '21 at 15:55

Adapting Stephen Zeng's answer for asp.net core. This in asp.net core here is what worked for me.

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

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

A weird thing I ran into as well is that locally and in an Azure staging slot it worked without this. It would only work in the production slot with this change.

Rotativa MVC not loading CSS or Images on PDF

5 Answers5

Linked