Adding CSS File to Report

luv2code4u

I have the following code but I cannot render the PDF with the linked stylesheet. I have inline styles in my header and footer, but I would prefer to use a stylesheet in my layout .cshtml page.

<html>
<head>
    <link href="css/js-report.css" rel="stylesheet" />
</head>
<body>
    <main class="main">
        @RenderBody()
    </main>
</body>
</html>

@{
    Layout = "_ReportLandscapeLayout";
}

<table class="report-table">
    <thead>
        <tr>
            {{#each columnHeaders}}
            <th>{{this}}</th>
            {{/each}}
        </tr>
    </thead>
    <tbody>
        {{#each data}}
        <tr>
            <td class="text-center">{{ward}}</td>
            <td>{{wardName}}</td>
            <td>{{sbrvNumber}}</td>
            <td>{{poll}}</td>
            <td>{{firstName}}</td>
            <td>{{lastName}}</td>
            <td>{{approvalDateUtc}}</td>
            <td>{{mailDateUtc}}</td>
            <td>{{isEnvelopeReceived}}</td>
            <td>{{receiptDateUtc}}</td>
            <td>{{isReceiptApproved}}</td>
        </tr>
        {{/each}}
    </tbody>
</table>

[HttpPost("js-report", Name = RouteNames.Reports.JsReportApi)]
        [MiddlewareFilter(typeof(JsReportPipeline))]
        public async Task<IActionResult> JsReportsApi(string columnHeaders, string rowData, string shortId, string title)
        {
            var user = HttpContext.User.Identity.Name;
            var jwt = await _cache.GetAsync<JwtAuthResult>($"{CacheKeys.JWTPrefix}{user}");

            var printedBy = jwt!.FirstName + " " + jwt.LastName;
            var printedDate = DateTime.Now.ToShortDateString();

            var reportFooterViewModel = new ReportFooterViewModel()
            {
                PrintedBy = printedBy,
                PrintedDate = printedDate
            };

            var reportHeaderViewModel = new ReportHeaderViewModel()
            {
                EventID = _appSettings.ElectionID,
                Title = title
            };

            var footer = await _jsReportMVCService.RenderViewToStringAsync(HttpContext, RouteData, "_Footer", reportFooterViewModel);
            var header = await _jsReportMVCService.RenderViewToStringAsync(HttpContext, RouteData, "_Header", reportHeaderViewModel);

            HttpContext.JsReportFeature()
                .Recipe(Recipe.ChromePdf)
                .Engine(Engine.Handlebars)
                .Configure((r) =>
                {
                    r.Data = new
                    {
                        ColumnHeaders = JsonConvert.DeserializeObject(columnHeaders),
                        Data = JsonConvert.DeserializeObject(rowData)
                    };
                    r.Options.Base = $"{HttpContext.Request.Scheme}://{HttpContext.Request.Host}"; ;
                    r.Template.Chrome = new Chrome
                    {
                        DisplayHeaderFooter = true,
                        FooterTemplate = footer,
                        HeaderTemplate = header,
                        MarginTop = "2cm",
                        MarginLeft = "0.5cm",
                        MarginBottom = "1.1cm",
                        MarginRight = "0.5cm",
                        Landscape = true
                    };
                });

            return View("RecordOfVoters");
        }

AfzalSohaib

I have this problem too. I think the most you can do in header and footer partial views is to use a <style> tag inside the view cshtml file and put your styles there.

My guess is that the Layout file is not mentioned in the partial views and jsreport just renders the header and footer without the linked stylesheet etc in your Layout file.