Javascript not running DOM modification

MathieuAuclair commented 5 years ago

When I turn my view into a PDF using Rotativa.AspNetCore, all of my javascript DOM modification are not enabled, for example, I use stretchy.js, that onload set the proper size for every input based on their content.

I was wondering if javascript should be working in Rotativa.AspNetCore just as the regular Rotativa in Asp.Net Mvc?

How to let javascript run before Rotativa turns the view in a PDF?

here's how I return my ActionResult

   [HttpPost, ActionName("Convert")]
   public ActionResult Convert(string html)
   {
       if (string.IsNullOrEmpty(html))
       {
           return BadRequest();
       }

       var decodedHtml = Encoding.UTF8.GetString(
           System.Convert.FromBase64String(html)
       );

       var headerPath = _hostingEnvironment.ContentRootPath + "\\wwwroot\\PrintHeader.html";
       var footerPath = _hostingEnvironment.ContentRootPath + "\\wwwroot\\PrintFooter.html";

       var customSwitches = $"--header-html  \"{headerPath}\" " +
                           "--header-spacing \"0\" " +
                           $"--footer-html \"{footerPath}\" " +
                           "--footer-spacing \"10\" " +
                           "--footer-font-size \"10\" " +
                            "--header-font-size \"10\" " +
                            "--debug-javascript " +
                            "--no-stop-slow-scripts " +
                            "--javascript-delay \"1000\" ";

       return new ViewAsPdf("Convert", new ConvertViewModel(decodedHtml))
       {
           PageSize = Size.A4,
           PageOrientation = Orientation.Portrait,
           CustomSwitches = customSwitches
       };
   }

And here's the view I'm trying to convert in pdf

@model SomeProject.ViewModel.ConvertViewModel
@{
    Layout = "";
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1.0"/>
    <title>QuotingPlus</title>
    <!--Custom CSS-->
    <link rel="stylesheet" href="~/css/site.min.css"/>
    <!-- Material Design for Bootstrap CSS -->
    <link rel="stylesheet" href="~/css/boostrap-material-design.min.css"/>
    <link rel="stylesheet" href="~/css/jquery.mCustomScrollbar.min.css"/>
    <script>
        function SetFormat(id) {
            const input = $("#" + id);
            const cost = parseFloat(input.val());
            input.val(
                Number.parseFloat(cost).toFixed(2)
            );
        }
    </script>
</head>
<body class="bg-white">
@Html.Raw(Model.HtmlContent)
<script src="~/js/cookie-handler.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/popper.min.js"></script>
<script src="~/js/boostrap-material-design.min.js"></script>
<script src="~/js/stretchy.js"></script>
<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>
<script src="~/js/jquery.mCustomScrollbar.concat.min.js"></script>
</body>
</html>

MathieuAuclair commented 5 years ago

@webgio @HenrikBacher @dnl1 @evinoid

If this is not implemented, is there a way to tell it in the readme?

mikkpaasuke commented 5 years ago

I believe I'm experiencing the same issue. I'm setting up a graphing view in a similar way, also using ViewAsPDF, and have experimented with all the relevant flags / options, with no good outcome. The graph is never drawn in the PDF, no matter what I do. Note that this approach works for our desktop product which calls WKHTMLTOPDF as an external process.

Dharmesh-IT commented 3 weeks ago

Hi,

Any update? It's not working for graphs and run time jquery UI rendering.

webgio / Rotativa.AspNetCore

Javascript not running DOM modification #29