Rotativa MVC not loading CSS or Images on PDF
Asked Answered
D

5

10

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

enter image description here

Image from HTML View

enter image description here

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 [email protected]</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>
Derisible answered 4/5, 2016 at 10:34 Comment(10)
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.Helgahelge
images added, it is just bootstrap CSS and very basic oneDerisible
Bootstrap has @media print { ...} styles.Helgahelge
the funny thing is <img src="~/Images/gandp.png" width="403" height="100" class="pull-right" /> even an image tag doesn't showDerisible
Just debug your print stylesheets. If you want your printed page to look exactly as the on-screen page, then remove the @media print { ... } styles.Helgahelge
removed all CSS and HTML just put an image tag, and it doesn't show the image on PDF , but it dose on the viewDerisible
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.Helgahelge
I think this has something to do with Rotativa configuration rather than CSS, :-(Derisible
No, Rotativa hardly has any configuration and will render most images just fine. Please update your question with an minimal reproducible example about either of the problems (print media CSS or images).Helgahelge
Please add the view code.Krohn
R
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" />
Reno answered 21/7, 2016 at 15:13 Comment(2)
This worked for me when a @Styles.Render() & BundleConfig did not.Handknit
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 breaksEcosystem
I
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.

Impossible answered 5/8, 2017 at 10:3 Comment(0)
S
0

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
));
Summer answered 7/12, 2017 at 9:44 Comment(0)
L
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

Lorrinelorry answered 15/7, 2020 at 20:24 Comment(0)
A
0

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.

Archipenko answered 6/10, 2021 at 15:55 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.