PDF is not rendering properly in Rotativa
Question
This is my page.
@model JNCloud.Web.UI.Models.AppointmentModel
@{
Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UB-04-081A</title>
<link href="~/Content/agency_media.css" type="text/css" media="all" rel="stylesheet" />
<link href="~/Content/agency_style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="~/Scripts/Common/js/jquery.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.naviDropDown.1.0.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-mask.js"></script>
<script type="text/javascript" src="../../Scripts/telerik.all.min.js"></script>
<script type="text/javascript" src="../../Scripts/scriptbreaker-multiple-accordion-1.js"></script>
<script src="@Url.Content("~/Scripts/jquery.poshytip.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.poshytip.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.poshytip.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/calendar/fullcalendar.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/calendar/overlib.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/calendar/fullcalendar.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/calendar/overlib.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/form.section.validator.js")" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="scripts/jquery164min.js">\x3C/script>')</script>
<!--local fallback for JQuery-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="~/Scripts/Common/js/qyb8ood.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
<script>window.jQuery || document.write('<script src="scripts/jquery164min.js">\x3C/script>')</script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var arr = new Array();
$(document).ready(function () {
SelectedScheduleEvents('@Model.PrintAgencyUserID', '@Model.PrintFiltervisittypeID', '@Model.PrintPatientID', '@Model.PrinttypeSchedule', '@Model.PrintDate');
});
function SelectedScheduleEvents(agencyuserid, FiltervisittypeID, PatientID, typeSchedule, date) {
console.log('manoj');
$("#calendar").empty();
$("#LocationId").attr('data-val-number', 'Patient Name does not Exists');
var cdate = date.replace('-', ' ');
var d = new Date(cdate);
var m;
var y;
if (isNaN(d.valueOf())) {
d = new Date();
m = d.getMonth();
y = d.getFullYear();
}
else {
m = d.getMonth();
y = d.getFullYear();
}
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
year: y,
month: m,
agenda: 'h:mm{ - h:mm}',
editable: false,
disableResizing: true,
selectable: true,
selectHelper: true,
select: function (start, end, allDay, Id) {
var Selectedtdate = start;
//alert('start'+start);
var todate = new Date();
//alert('todate'+todate.getMonth()+3);
//if (Selectedtdate > todate && Selectedtdate.getDate() != todate.getDate()) {
//if (Selectedtdate > todate.getMonth()+3 ) {
// alert('Please select less than 90 days later from todate.');
// return;
//}
AddEvent(start);
calendar.fullCalendar('unselect');
},
events: { url: '@Url.Action("SelectedScheduleEvents", "Schedule")' + '?AgencyUsersID=' + agencyuserid + '&FiltervisittypeID=' + 0 + '&PatientID=' + PatientID + '&typeSchedule=' + typeSchedule },
eventClick: function (calEvent, jsEvent, view) {
var eventTime = $.fullCalendar.formatDate(calEvent.start, "h:sstt");
var Id = calEvent.id;
var apptype = calEvent.appointmenttype;
var clinicianId = calEvent.clinicianId;
var startdate = calEvent.start;
var enddate = calEvent.end;
var comment = calEvent.comment;
var meetduration = calEvent.duration;
var backcolor = calEvent.backgroundColor;
var patientIds = calEvent.patientIds;
var locationid = calEvent.locationId;
var lname = calEvent.locationName;
var visittypeid = calEvent.VisitTypeID;
EditEvent(Id, calEvent.title, patientIds, clinicianId, startdate, enddate, eventTime, meetduration, comment, backcolor, apptype, locationid, lname, visittypeid);
},
eventMouseout: function (calEvent, domEvent) {
if (!$("#events-layer").hasClass('mouse_in')) {
$("#events-layer").remove();
}
}
});
$("#divLoading").hide();
$("#hdnCurrentDate").val(0);
}
</script>
</head>
<body style="padding: 0; font-family: Arial, Helvetica, sans-serif;">
<div style="display: none">@Html.TextBoxFor(x => x.SelectedPID)</div>
<div class="widget first">
<div>
<div id="calendar" style="width: 100%;">
</div>
</div>
</div>
@* End Confirm Assessment form *@
</body>
</html>
And in controller when I use this
return View(objappointmentmodel);
then it's look like this
And when in controller I use this
return new ViewAsPdf("PrintCalendar", objappointmentmodel)
{
PageSize = Rotativa.Options.Size.A4,
PageOrientation = Orientation.Portrait,
PageMargins = { Left = 0, Right = 0 }
};
then it's look like this. This isn't loading properly.
What should I do?
I have researched also about this. But I can't find a proper solution.
Please suggest me.
2 answers
solution1
0 2015-02-05 10:30:17
i got similiar problem-
the rotativa didnt manage to handle the font-family.
when i use ARIAL the PDF looks good.
try also to change path to js and css file to a full path.
good luck
solution2
0 2015-02-25 22:01:44
I've been using Rototiva recently to make customer print outs on the fly and I've ran into issues regarding relative paths as opposed to fully qualified paths. My strategy was to create a partial view and view model for the parts of my page that required jquery and images (rendered using the @Html.Action() helper) and then make the pdf with two different action results in my controller:
public ActionResult CustPrintOut() {
// doing stuff
return View("CustPrintOut"); // return a view that renders your partials
}
public ActionResult printout() {
return new ActionAsPdf("CustPrintOut") {
FileName = "printout.pdf"
};
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
PDF.JS PDF is not rendering properly, appears mirrored and upside down
Convert Html to Pdf using Rotativa in AspNetCore
Rendering pdf with pdf js
Hide Print button and nav menu in PDF using Rotativa PDF generator in Asp MVC 5
PDF Rendering in Canvas PDF JS
How to generate PDF with Rotativa including charts from C3JS Asp.net
How can I dynamically Add css property to div class using javascript when converting to pdf using rotativa?
phantomjs incorrect pdf rendering
Rendering pdf blob on Chrome
rendering pdf files javascript
Related Tags