I'm having trouble creating a PDF with Rotativa in my ASP.NET MVC app. The problem is with adding Highcharts-based charts to the PDF – everything else shows up fine, but the charts are missing.
- button:
<button class="btn btn-warning"> <i class="fa fa-print"></i> <span class="bold"> @Html.ActionLink(@.LocalResource.Resource.Print, "ConvertToPDF", "Monitoring", new { id = 1 }, new { @Style = "color: white;", @target = "_blank" })</span></button>
- controller:
public ActionResult header(int id)
{
ViewBag.Header = id == 1 ? LocalResource.Resource.TransactionsReport : "Vue Gab";
return View();
}
[HttpGet]
public ActionResult ConvertToPDF(int id)
{
ViewBag.HideLayout = 1;
//string cusomtSwitches = string.Format(" --print-media-type --page-offset 2 --footer-center [page] --allow {0} --footer-html {0} --footer-spacing -180 ",
// Url.Action("header", "CashView"));
UriBuilder u = new UriBuilder(Request.Url.AbsoluteUri)
{
Path = Url.Action("header", "Monitoring", new { id = id }),
Query = null
};
//Format the header to read Test.cshtml file
string t = string.Format("--header-html {0}", u.Uri.ToString());
string customSwitches = "--enable-javascript --debug-javascript --no-stop-slow-scripts --javascript-delay 10000";
var model = new object();
if (id == 1)
{
model = modelTrnsReport;
}
else
{
model = homeModel;
}
var pdf = new Rotativa.ViewAsPdf
{
ViewName = (id == 1 ? "PdftransactionReport" : ""),
Model = model,
FileName = (id == 1 ? "Transactions Report" : "Vue Gab") + DateTime.Now.Date + ".pdf",
PageSize = Rotativa.Options.Size.A4,
PageMargins = new Margins(35, 10, 20, 10),
PageOrientation = Orientation.Landscape,
//"--viewport-size 1000x1000"
CustomSwitches = customSwitches
};
return pdf;
}
- pdf view that generate :
@model Website.Areas.AVMonitoring.Models.TransactionReportModel
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body style="background:none">
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-xs-6">
<div class="ibox float-e-margins">
<div class="ibox-title" style="margin-bottom:2px">
<h5></h5>
</div>
<div class="ibox-content">
<h3 class="no-margins">
@Website.LocalResource.Resource.RateofsuccessfulTransaction : @Model.RateofsuccessfulTransaction %
</h3>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="ibox float-e-margins">
<div class="ibox-title" style="margin-bottom:2px">
<h5></h5>
</div>
<div class="ibox-content col-xs-pull-12">
<h3 style="text-overflow: ellipsis;" class="no-margins">@Website.LocalResource.Resource.Numberof Transaction : @Model.TransactionNumber</h3>
</div>
</div>
</div>
</div>
<div class="row match-height">
<div class="col-lg-6 col-12">
<div class="card">
<div class="card-content collapse show match-height">
<div class="card-body">
<div class="bs-callout-light bg-light callout-border-left p-1">
<strong>@Website.LocalResource.Resource.TransactionByType</strong>
</div>
<div class=" ">
<div class="card-body">
<div id="chart_transaction_type"></div>
</div>
</div>
<div>
<div class="table-responsive" style="font-size: 1.2rem">
<table class=" table table-bordered table-striped">
<thead>
<tr style="font-size: 13px">
<th>@Website.LocalResource.Resource.Transactiontype</th>
<th>@Website.LocalResource.Resource.NumberOfTransactions</th>
<th>@Website.LocalResource.Resource.Rate </th>
<th>@Website.LocalResource.Resource.color </th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.TransactionTypeGraphData)
{
<tr style="font-size: 11px">
<th scope="row">
@if (Session["lang"] == "en")
{
@item.highlight
}
else
{
@item.label_fr
}
@*@item.highlight*@
</th>
<td>@item.count</td>
<td>@item.value %</td>
<td style="background:@item.color"></td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="card">
<div class="card-content collapse show match-height">
<div class="card-body">
<div class="bs-callout-light bg-light callout-border-left p-1">
<strong>@Website.LocalResource.Resource.RejectIssues</strong>
</div>
<div class=" ">
<div class="card-body">
<div id="chart_Motif_Rejet"></div>
</div>
</div>
<div class=" ">
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr style="font-size: 13px">
<th>@Website.LocalResource.Resource.Rejecttype</th>
<th>@Website.LocalResource.Resource.NumberOfTransactions</th>
<th>@Website.LocalResource.Resource.Rate </th>
<th>@Website.LocalResource.Resource.color </th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.RejectedTransactionList)
{
<tr style="font-size: 11px">
<th scope="row">
@if (Session["lang"] == "en")
{
@item.highlight
}
else
{
@item.label_fr
}
@*@item.highlight*@
@*@item.highlight*@
</th>
<td>@item.count</td>
<td>@item.value %</td>
<td style="background:@item.color"></td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<P CLASS="breakhere"></P>
<div class="ibox-title">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>@Website.LocalResource.Resource.ATM A</th>
<th>@Website.LocalResource.Resource.Rateofsuccess </th>
<th>@Website.LocalResource.Resource.Numberof TRX</th>
@*<th>Total @Website.LocalResource.Resource.Withdrawal</th>*@
<th>@Website.LocalResource.Resource.Withdrawal</th>
@*<th>@Website.LocalResource.Resource.Withdrawal @Website.LocalResource.Resource.withoutcard </th>*@
<th>@Website.LocalResource.Resource.Other types </th>
<th>@Website.LocalResource.Resource.LastTransaction</th>
@*<th>@Website.LocalResource.Resource.Detail</th>*@
</tr>
</thead>
<tbody>
@foreach (var item in Model.AtmTransactionList)
{
<tr>
@if (@item.RateOfsuccessfulTransaction >= 70 && @item.TransactionsCount > 0)
{
<td><small><button class="btn btn-success btn-xs" disabled>Good</button></small></td>
}
else
{
if (@item.RateOfsuccessfulTransaction < 70 && @item.TransactionsCount > 0)
{
<td><small><button class="btn btn-warning btn-xs" disabled>Warning</button></small></td>
}
else
{
<td><small><button class="btn btn-outline-info btn-xs" disabled>Inactive</button></small></td>
}
}
<td>@item.AtmId @item.AtmName</td>
<td>@item.RateOfsuccessfulTransaction %</td>
<td>@item.TransactionsCount</td>
<td>@item.TransactionRetrait</td>
@*<td>@item.TransactionWithoutCard</td>
<td>@item.TransactionCard</td>*@
<td>@item.OtherOption</td>
<td>@item.LastTransaction</td>
<!--<td class="">-->
@*@Html.ActionLink("Detail", "Detail", 1, new { @class = "btn btn-primary btn-sm" })*@
<!--<input type="button" class="btn btn-primary btn-sm" data-assigned-id="@item.AtmId" onclick="javascript:DetailTrns(@("\"")@item.AtmId@("\""));" value="Detail" />
</td>-->
</tr>
}
</tbody>
</table>
</div>
</div>
</body>
<style>
.breakhere {
page-break-after: always
}
table, tr, td, th, tbody, thead, tfoot {
page-break-inside: avoid !important;
}
</style>
<!-- Mainly scripts -->
<script src="~/app-assets/vendors/js/vendors.min.js"></script>
<script src="~/app-assets/vendors/js/charts/chart.min.js"></script>
<script src="~/app-assets/js/scripts/charts/apexcharts/accessibility.js"></script>
<script src="~/app-assets/js/scripts/charts/apexcharts/export-data.js"></script>
<script src="~/app-assets/js/scripts/charts/apexcharts/exporting.js"></script>
<script src="~/app-assets/js/scripts/charts/apexcharts/highcharts.js"></script>
<script src="~/app-assets/js/scripts/charts/apexcharts/accessibility.js"></script>
<script src="~/app-assets/bundle.min.js"></script>
<script src="~/app-assets/vendors/js/charts/apexcharts/apexcharts.min.js"></script>
<script src="~/app-assets/js/scripts/charts/apexcharts/charts-apexcharts.js"></script>
<script type="text/javascript">
Highcharts.setOptions({
plotOptions: {
series: {
animation: false
}
}
});
$(document).ready(function () {
var doc = document.getElementById("Html");
var htm = document.getElementById("trxReportDiv");
var M = " ";
M += htm.outerHTML;
doc.setAttribute("value", M);
});
</script>
@*///////////////////////////// chart_transaction_type ////////////////////////////////*@
<script>
var data3 = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.TransactionTypeGraphData));
var chartData = $.map(data3, function (obj, i) { return { "name": obj.label, "y": obj.count, "drilldown": obj.color }; });
Highcharts.chart('chart_transaction_type', {
chart: {
type: 'pie'
},
title: {
text: null,
},
tooltip: {
valueSuffix: '%'
},
colors: $.map(data3, function (obj, i) { return [obj.color]; }),
series: [
{
name: 'Percentage',
colorByPoint: true,
data: chartData,
}
]
});
</script>
@*///////////////////////////// chart_Motif_Rejet ////////////////////////////////*@
<script>
var data3 = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.RejectedTransactionList));
var chartData = $.map(data3, function (obj, i) { return { "name": obj.label, "y": obj.count, "drilldown": obj.color }; });
Highcharts.chart('chart_Motif_Rejet', {
chart: {
type: 'pie'
},
title: {
text: null,
},
tooltip: {
valueSuffix: '%'
},
colors: $.map(data3, function (obj, i) { return [obj.color]; }),
series: [
{
name: 'Percentage',
colorByPoint: true,
data: chartData,
}
]
});
</script>
I tried generating a PDF using Rotativa in my ASP.NET MVC application, including charts. However, the charts are not showing up in the PDF, even though the tables and other data display correctly. I expected both the tables and charts to be included in the generated PDF.